/*
 * AUTO-GENERATED by design-token-pipeline. Do not edit by hand.
 */

:root {
    --finchart-bg: #ffffff; /* XML default/bgcolor */
    --finchart-grid: #ced4da; /* XML default/axiscolor = $gray-400 */
    --finchart-text: #343a40; /* XML default/scolor = $gray-800 */
    --finchart-muted: #6c757d; /* $gray-600; arrow/quote-ticker use one grey for both */
    --finchart-crosshair: #adb5bd; /* $gray-500 - the only value no component backs */
    --finchart-line: #093967; /* XML default/color = $brand-finnet */
    --finchart-area-top: #09396780; /* XML mountain/fcolor 80093967 */
    --finchart-area-bottom: #ffffff80; /* XML mountain/fsecondcolor 80ffffff */
    --finchart-up: #198754; /* XML ohlc/upcolor = $green */
    --finchart-up-soft: #19875433; /* arrow background-positive = @20% -> flat #d1e7dd */
    --finchart-neutral: #6c757d; /* arrow color-default: a grey, not an amber */
    --finchart-down-soft: #dc354533; /* arrow background-negative = @20% -> flat #f8d7da */
    --finchart-down: #dc3545; /* XML ohlc/downcolor = $red */
    --finchart-tooltip-bg: #000000;
    --finchart-tooltip-text: #ffffff;

    --finchart-series-blue-strong: #093967; /* colorquintruple[0] = $brand-finnet default */
    --finchart-series-blue-mid: #116ec5; /* $brand-finnet lighter */
    --finchart-series-blue-soft: #09396733; /* $brand-finnet default @ 20% */
    --finchart-series-blue-ghost: #09396714; /* $brand-finnet default @ 8% */
    --finchart-series-blue-peak: #041f38; /* $brand-finnet dark (dark, not darker: darker is #000509) */
    --finchart-series-yellow-strong: #ffc107; /* colorquintruple[1] = $yellow default */
    --finchart-series-yellow-mid: #ffda6b; /* $yellow lighter */
    --finchart-series-yellow-soft: #ffc10733; /* $yellow default @ 20% */
    --finchart-series-yellow-ghost: #ffc10714; /* $yellow default @ 8% */
    --finchart-series-yellow-peak: #9e7600; /* $yellow darker */
    --finchart-series-slate-strong: #dc3545; /* colorquintruple[2] = $red default */
    --finchart-series-slate-mid: #eb8e97; /* $red lighter */
    --finchart-series-slate-soft: #dc354533; /* $red default @ 20% */
    --finchart-series-slate-ghost: #dc354514; /* $red default @ 8% */
    --finchart-series-slate-peak: #931a26; /* $red darker */
    --finchart-series-teal-strong: #20c997; /* colorquintruple[3] = $teal default */
    --finchart-series-teal-mid: #69e7c1; /* $teal lighter */
    --finchart-series-teal-soft: #20c99733; /* $teal default @ 20% */
    --finchart-series-teal-ghost: #20c99714; /* $teal default @ 8% */
    --finchart-series-teal-peak: #117255; /* $teal darker */
    --finchart-series-rose-strong: #6610f2; /* colorquintruple[4] = $indigo default */
    --finchart-series-rose-mid: #a572f7; /* $indigo lighter */
    --finchart-series-rose-soft: #6610f233; /* $indigo default @ 20% */
    --finchart-series-rose-ghost: #6610f214; /* $indigo default @ 8% */
    --finchart-series-rose-peak: #3e0796; /* $indigo darker */
}
/*
 * Hand-written part of the FinCharts theme -- everything that is NOT emitted by the
 * design-token pipeline: the chart font, the font-family token and the loading skeleton for
 * static chart images. Kept separate from src/tokens.generated.css so that regenerating the
 * tokens upstream cannot silently drop it.
 *
 * The build (scripts/build.mjs) concatenates tokens.generated.css + chrome.css into the single
 * dist/fincharts-theme.css that consumers load.
 */

/* Chart font "OpenSans" (finanzen.net). Regular + Bold, so that bold labels sit correctly. The URL is
   relative to the shipped CSS (.../fincharts-theme.css => .../fonts/...); the font files are part of this
   package. The server-side image renderer registers the same files in Skia so that image and browser
   show the same font (see ADR 0057). */
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/OpenSans-Bold.ttf") format("truetype");
}

/* Chart font family (not a colour token) -- central for axes, labels, legend and tooltip. The stack names
   concrete families so that BOTH renderers resolve the same font: a browser resolves `system-ui` to the OS
   UI font, while a server-side Skia canvas does not know `system-ui` and would fall back to a different
   default sans. Mirrored into the dark selector as well, so the headless dark render resolves it too. */
:root {
  --finchart-font-family: "OpenSans", Arial, Helvetica, sans-serif;
}

.finchart-root[data-theme="dark"],
:root[data-color-scheme="dark"] {
  --finchart-font-family: "OpenSans", Arial, Helvetica, sans-serif;
}

/*
 * Loading skeleton for static chart images (BuildAsImage, <img class="finchart-img">): shows the same
 * shimmer as the chart loading skeleton until the image has loaded. The <img> reserves its box via
 * width/height; the shimmer is the element background and gets covered by the loaded (opaque) image --
 * `data-loaded` (set via onload) additionally stops the animation. Without this CSS the <img> stays plain.
 */
.finchart-img {
  /* Layer 1 = travelling shimmer (animated), layer 2 = type-specific silhouette (via data-chart-type;
     default = line). The loaded, opaque image covers both; data-loaded stops them. */
  --fc-shimmer: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 65%);
  background-color: #eef2f7;
  background-image: var(--fc-shimmer),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'><polyline points='6,40 18,30 30,44 42,28 54,46 66,26 78,42 90,24 102,40 114,32' fill='none' stroke='rgb(199,208,221)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 200% 100%, 78% 62%;
  background-position: 200% 0, center;
  animation: finchart-img-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes finchart-img-shimmer {
  0%   { background-position: 200% 0, center; }
  100% { background-position: -200% 0, center; }
}
.finchart-img[data-loaded] { background: none; animation: none; }

/* Type silhouettes -- only the second background layer (the shimmer stays layer 1). */
.finchart-img[data-chart-type="area"] {
  background-image: var(--fc-shimmer),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'><path d='M6,42 18,32 30,46 42,30 54,48 66,28 78,44 90,26 102,42 114,34 114,66 6,66Z' fill='rgb(220,227,237)'/><polyline points='6,42 18,32 30,46 42,30 54,48 66,28 78,44 90,26 102,42 114,34' fill='none' stroke='rgb(199,208,221)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.finchart-img[data-chart-type="pie"] {
  background-image: var(--fc-shimmer),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'><circle cx='60' cy='36' r='22' fill='none' stroke='rgb(199,208,221)' stroke-width='15'/></svg>");
  background-size: 200% 100%, 52% 82%;
}
.finchart-img[data-chart-type="column"],
.finchart-img[data-chart-type="bar"],
.finchart-img[data-chart-type="bar-horizontal"] {
  background-image: var(--fc-shimmer),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'><g fill='rgb(199,208,221)'><rect x='12' y='40' width='12' height='26'/><rect x='34' y='28' width='12' height='38'/><rect x='56' y='46' width='12' height='20'/><rect x='78' y='22' width='12' height='44'/><rect x='100' y='34' width='12' height='32'/></g></svg>");
}
.finchart-img[data-chart-type="candlestick"],
.finchart-img[data-chart-type="ohlc"],
.finchart-img[data-chart-type="heikin-ashi"],
.finchart-img[data-chart-type="renko"],
.finchart-img[data-chart-type="point-figure"] {
  background-image: var(--fc-shimmer),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'><g stroke='rgb(199,208,221)' stroke-width='2' fill='rgb(199,208,221)'><line x1='15' y1='20' x2='15' y2='52'/><rect x='11' y='28' width='8' height='16'/><line x1='33' y1='26' x2='33' y2='58'/><rect x='29' y='34' width='8' height='14'/><line x1='51' y1='18' x2='51' y2='46'/><rect x='47' y='24' width='8' height='14'/><line x1='69' y1='24' x2='69' y2='56'/><rect x='65' y='32' width='8' height='16'/><line x1='87' y1='16' x2='87' y2='44'/><rect x='83' y='22' width='8' height='14'/><line x1='105' y1='22' x2='105' y2='54'/><rect x='101' y='30' width='8' height='16'/></g></svg>");
}
.finchart-img[data-chart-type="scatter"],
.finchart-img[data-chart-type="bubble"] {
  background-image: var(--fc-shimmer),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'><g fill='rgb(199,208,221)'><circle cx='16' cy='30' r='3'/><circle cx='30' cy='48' r='3'/><circle cx='42' cy='24' r='3'/><circle cx='54' cy='40' r='3'/><circle cx='66' cy='54' r='3'/><circle cx='78' cy='28' r='3'/><circle cx='90' cy='46' r='3'/><circle cx='102' cy='34' r='3'/><circle cx='24' cy='58' r='3'/><circle cx='48' cy='18' r='3'/><circle cx='84' cy='60' r='3'/><circle cx='110' cy='50' r='3'/></g></svg>");
}