/*
 * fincharts-theme.css - LEGACY palette, hand-built once, not pipeline output.
 *
 * The old ChartDelivery colours, mapped onto FinCharts' contract. Light only:
 * the ChartDelivery XML files have no dark mode, so there is no dark selector
 * here and FinCharts' own dark theme applies when the host switches.
 *
 * Sources, in this order of authority:
 *   1. Smarthouse.ChartDelivery .../Configuration/FinanzenNetStyleguide.tokens.xml
 *      (2026-07-09, pre-repoint). deliveryV1.tokens.xml - the file overlaid on
 *      every v1 chart - is byte-identical on every shared tag; checked, not assumed.
 *   2. common-styles @ origin/develop, src/style/0.definition/_color.scss and
 *      src/style/2.component/{arrow,tooltip} - for the seven properties the XML
 *      cannot answer, because FinCharts distinguishes colours ChartDelivery never had.
 *
 * Property names and order come from FinCharts' own theme.ts (CSS_VARS, SERIES_HUES,
 * SERIES_TONES). The hue in a series name is its POSITION, not its colour: slate is
 * red here, rose is purple. That is FinCharts' flattening order, not a mistake.
 *
 * Seven properties FinCharts reads are deliberately not declared, and fall back to
 * its built-in defaults - neither source has any counterpart:
 *   --finchart-callout, --finchart-band  translucent by function
 *   --finchart-map-ocean, --finchart-map-land, --finchart-map-land-stroke,
 *   --finchart-map-region, --finchart-map-region-stroke   no cartographic colour
 *
 * Three things to know before judging the result:
 *   1. amber and violet - series slots 6 and 7 - keep FinCharts' own colours. The old
 *      colorquintruple has five entries. theme.ts overrides the matrix per cell, so
 *      this is supported and monochrome mode still works.
 *   2. neutral is a grey, not an amber. FinCharts defaults it to #f0a500; the
 *      finanzen.net arrow and quote-ticker components both colour an unchanged trend
 *      with the same grey they use for secondary text. This follows the components.
 *   3. the tooltip is white because the component is white - but the component also
 *      has a 1px border and a shadow, and FinCharts has a variable for neither. A
 *      white tooltip on a white chart has no visible edge. If that shows, set
 *      --finchart-tooltip-bg: #f8f9fa ($gray-100).
 *
 * Not verified: nobody has looked at a rendered chart with this file. That needs
 * FinCharts running, which is not possible from the pipeline repository.
 */

: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 */
}