/*
 * 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 npm package concatenates tokens.generated.css + chrome.css into one fincharts-theme.css.
 * Classic Web keeps the two layers apart: fincharts-theme.css holds the colour tokens, this file
 * (fincharts-chrome.css) the rest. Load it AFTER fincharts-theme.css.
 */

/* 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>");
}