/* ==========================================================================
   desk2026-tokens.css  -  ALL colours (and type / radii) of the 2026 design
   --------------------------------------------------------------------------
   Load order : before css/desk2026.css (index.html) and in files/cookie.html.
   Rule       : desk2026.css, lib/desk2026_*.js and the 2026 code paths in lib/
                use only these variables (no colour literals). Another
                customer's palette = change the values in this file only.
   Sections   : 0. constants (same in both themes, on :root so pages without
                   the desk's theme classes, e.g. the cookie page, can use them)
                1. / 1b. per theme (Hell = .light-theme, Dunkel = .dark-theme
                   on <body>), 1c. derived with the same formula.
   Not here   : national flag colours (SVG pictures in desk2026_lists.js) and
                partner logos (images); user-chosen colours (settings pickers,
                chart configurations) stay user data.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Constants (theme independent)
   -------------------------------------------------------------------------- */
:root {
  /* white elements on any background: switch knobs, text on coloured fills, plates behind partner logos */
  --d26-knob: #FFFFFF;
  --d26-on-color: #FFFFFF;
  --d26-logo-plate: #FFFFFF;
  /* base colour of all small shadows (used as color-mix(in srgb, var(--d26-shade) N%, transparent)) */
  --d26-shade: #02031A;
  --d26-shade-deep: #000000;
  /* status */
  --d26-warn: #E8A400;      /* toast warning icon */
  --d26-pending: #F59E0B;   /* window footer: unsaved changes pending */
  /* window group colours 1-10 (container head group badge); group 1 = accent, see the dark block */
  --d26-group-1: #2B24FF; --d26-group-2: #0891B2; --d26-group-3: #C026D3; --d26-group-4: #D97706; --d26-group-5: #08996A;
  --d26-group-6: #DB2F4A; --d26-group-7: #6D28D9; --d26-group-8: #0EA5E9; --d26-group-9: #A16207; --d26-group-10: #475569;
  /* chart series (Chart.js key colours: Infobox, Bubble Chart, Branchen) */
  --d26-series-1: #2B24FF; --d26-series-2: #96B2FF; --d26-series-3: #00A877; --d26-series-4: #7A5CFF;
  --d26-series-5: #F5A524; --d26-series-6: #090F60; --d26-series-7: #E5484D; --d26-series-8: #C8E64A;
  /* main chart: neutral volume bars; yellow price labels of old drawings / scans, softened (layer.js) */
  --d26-neutral-vol: rgba(128,132,150,.2);
  --d26-label-yellow: #F3D46B;
  /* sentiment bar (between --d26-down and --d26-up) */
  --d26-senti-2: #F5A524; --d26-senti-3: #F2D046; --d26-senti-4: #9BCB4A;
  /* brand splash: loading screen and cookie page (dark brand blue in both themes) */
  --d26-splash-1: #12197A; --d26-splash-2: #090F60; --d26-splash-3: #060A45;
  --d26-splash-card: #0E1450;
  --d26-splash-ink: #FFFFFF;
  --d26-splash-accent: #336AFF;
  --d26-splash-accent-hover: #4A7BFF;
  --d26-splash-link: #96B2FF;
  /* partner brand colours (identical for every customer) */
  --d26-brand-zero: #E0146A;          /* finanzen.net ZERO */
  --d26-brand-zero-2: #D3166A;        /* finanzen.net ZERO in the Derivate-Box */
  --d26-brand-comdirect: #FFF500;
  --d26-brand-comdirect-hover: #F2E800;
  --d26-on-brand-comdirect: #111111;
  --d26-brand-morningstar-light: #E3B8B8;   /* Morningstar screener header, Hell */
  --d26-brand-morningstar-dark: #742929;    /* Morningstar screener header, Dunkel */
}

/* --------------------------------------------------------------------------
   1. Tokens  -  Hell
   -------------------------------------------------------------------------- */
html.desk-2026 .light-theme {
  /* Surfaces */
  --d26-bg: #ECEFF7;
  --d26-surface: #FFFFFF;
  --d26-surface-2: #F3F5FB;
  --d26-surface-3: #E6EAF6;
  --d26-pop: #FFFFFF;
  /* Text */
  --d26-ink: #02031A;
  --d26-ink-2: #464B67;
  --d26-ink-3: #7D829D;
  /* Lines / chart grid */
  --d26-line: rgba(5,10,85,.08);
  --d26-grid: rgba(5,10,85,.055);
  --d26-cross: rgba(2,3,26,.42);
  /* Accent */
  --d26-accent: #2B24FF;
  --d26-accent-2: #000992;
  --d26-accent-soft: #E8E9FF;
  --d26-on-accent: #FFFFFF;
  /* Market up / down */
  --d26-up: #08996A;
  --d26-down: #DB2F4A;
  --d26-up-soft: rgba(8,153,106,.10);
  --d26-down-soft: rgba(219,47,74,.09);
  --d26-up-vol: rgba(8,153,106,.22);
  --d26-down-vol: rgba(219,47,74,.20);
  /* Chart fills */
  --d26-area-top: rgba(43,36,255,.16);
  --d26-band: rgba(43,36,255,.06);
  /* Brand extras */
  --d26-lime: #E7FA62;
  --d26-on-lime: #02031A;
  --d26-logo-ink: #090F60;
  --d26-on-solid: #FFFFFF;
  --d26-pin: #2B24FF;
  --d26-on-pin: #FFFFFF;
  /* Indicator series */
  --d26-ind-1: #2B24FF;
  --d26-ind-2: #D97706;
  --d26-ind-3: #C026D3;
  --d26-ind-4: #0891B2;
  /* Elevation */
  --d26-shadow: 0 12px 40px rgba(2,3,26,.14), 0 2px 6px rgba(2,3,26,.06);
  --d26-scrim: rgba(2,3,26,.30);
  /* Derived (not in the preview): opaque/theme-specific helpers */
  --d26-line-solid: #EBEBF1; /* --d26-line flattened on --d26-surface; for picker keys (#rrggbb only) */
  --d26-hover: var(--d26-surface-2); /* row/menu hover, as preview .mi:hover */
  --d26-shadow-color: rgba(2,3,26,.14); /* colour-only part of --d26-shadow */
  /* Type, radii, sizing (same in both themes) */
  --d26-f-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --d26-f-read: "Source Serif 4", Georgia, "Times New Roman", serif;
  --d26-r1: 4px; --d26-r2: 6px; --d26-r3: 10px; --d26-pill: 999px;
  --d26-fs-cap: 11px; --d26-fs-s: 12px; --d26-fs: 13px; --d26-fs-m: 15px; --d26-fs-l: 20px; --d26-fs-xl: 28px;
  --d26-row: 36px;
  /* Toast (inverted surface) */
  --d26-toast-bg: #02031A;
  --d26-toast-ink: #FFFFFF;
  /* Flagged stocks in lists (marker) */
  --d26-flag: var(--d26-accent);                                              /* brand blue (guideline) */
  --d26-flag-soft: color-mix(in srgb, var(--d26-accent) 8%, transparent);
  /* color-scheme: light;  -> later phase (affects native controls, not a variable) */
}

/* --------------------------------------------------------------------------
   1b. Tokens  -  Dunkel
   -------------------------------------------------------------------------- */
html.desk-2026 .dark-theme {
  /* Surfaces */
  --d26-bg: #02031A;
  --d26-surface: #090B27;
  --d26-surface-2: #11143A;
  --d26-surface-3: #1A1E4C;
  --d26-pop: #13173F;
  /* Text */
  --d26-ink: #FFFFFF;
  --d26-ink-2: #B3B9D9;
  --d26-ink-3: #737A9E;
  /* Lines / chart grid */
  --d26-line: rgba(150,178,255,.10);
  --d26-grid: rgba(150,178,255,.065);
  --d26-cross: rgba(240,244,255,.5);
  /* Accent */
  --d26-accent: #336AFF;
  --d26-accent-2: #96B2FF;
  --d26-accent-soft: rgba(51,106,255,.20);
  --d26-on-accent: #FFFFFF;
  /* Market up / down */
  --d26-up: #2FD08F;
  --d26-down: #FF5C70;
  --d26-up-soft: rgba(47,208,143,.13);
  --d26-down-soft: rgba(255,92,112,.13);
  --d26-up-vol: rgba(47,208,143,.22);
  --d26-down-vol: rgba(255,92,112,.20);
  /* Chart fills */
  --d26-area-top: rgba(51,106,255,.30);
  --d26-band: rgba(150,178,255,.07);
  /* Brand extras */
  --d26-lime: #E7FA62;
  --d26-on-lime: #02031A;
  --d26-logo-ink: #FFFFFF;
  --d26-on-solid: #02031A;
  --d26-pin: #E7FA62;
  --d26-on-pin: #02031A;
  /* Indicator series */
  --d26-ind-1: #96B2FF;
  --d26-ind-2: #FFB547;
  --d26-ind-3: #F07BDA;
  --d26-ind-4: #4FD6EA;
  /* Elevation */
  --d26-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(150,178,255,.08);
  --d26-scrim: rgba(0,0,8,.55);
  /* Derived (not in the preview): opaque/theme-specific helpers */
  --d26-line-solid: #171C3D; /* --d26-line flattened on --d26-surface; for picker keys (#rrggbb only) */
  --d26-hover: var(--d26-surface-3); /* row/menu hover, as preview .mi:hover */
  --d26-shadow-color: rgba(0,0,0,.55); /* colour-only part of --d26-shadow */
  /* Type, radii, sizing: identical to Hell, repeated so each theme block is self-contained */
  --d26-f-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --d26-f-read: "Source Serif 4", Georgia, "Times New Roman", serif;
  --d26-r1: 4px; --d26-r2: 6px; --d26-r3: 10px; --d26-pill: 999px;
  --d26-fs-cap: 11px; --d26-fs-s: 12px; --d26-fs: 13px; --d26-fs-m: 15px; --d26-fs-l: 20px; --d26-fs-xl: 28px;
  --d26-row: 36px;
  /* Toast (inverted surface) */
  --d26-toast-bg: #F2F3F8;
  --d26-toast-ink: #02031A;
  /* Flagged stocks in lists (marker) */
  --d26-flag: var(--d26-accent);                                              /* brand blue (guideline) */
  --d26-flag-soft: color-mix(in srgb, var(--d26-accent) 16%, transparent);
  /* window group 1 follows the accent */
  --d26-group-1: #336AFF;
  /* color-scheme: dark;  -> later phase (affects native controls, not a variable) */
}

/* --------------------------------------------------------------------------
   1c. Derived tokens with the same formula in both themes
   -------------------------------------------------------------------------- */
html.desk-2026 .light-theme,
html.desk-2026 .dark-theme {
  --d26-up-hover: color-mix(in srgb, var(--d26-up) 85%, var(--d26-ink));         /* darker in Hell, lighter in Dunkel */
  --d26-down-hover: color-mix(in srgb, var(--d26-down) 85%, var(--d26-ink));
  --d26-accent-hover: color-mix(in srgb, var(--d26-accent) 85%, var(--d26-ink));
  --d26-down-tint: color-mix(in srgb, var(--d26-down) 22%, #FFFFFF);               /* light pink in both themes: text on it is hard-coded black */
  --d26-glass: color-mix(in srgb, var(--d26-surface) 90%, transparent);
  --d26-scrollthumb: color-mix(in srgb, var(--d26-ink-3) 55%, transparent);
  --d26-watermark: color-mix(in srgb, var(--d26-ink) 7%, transparent);             /* issuer logo behind partner tools */
}