@layer tokens, base, legacy, components, channels, overrides;

@layer tokens {
    :root {
        /* Surfaces — STIL.md §2, exact source values expressed as OKLCH. */
        --surface-canvas: oklch(17.764% 0 0);
        --surface-panel: oklch(19.573% 0 0);
        --surface-raised: oklch(22.645% 0 0);
        --surface-hover: oklch(24.776% 0 0);
        --surface-selected: oklch(23.929% 0 0);
        --surface-overlay: oklch(22.645% 0 0);

        /* Der abgedunkelte Grund hinter einem Dialog. Er ist keine Flaeche
           der Palette, sondern eine Abdunklung von allem, was dahinter
           liegt — deshalb Schwarz mit Deckkraft und nicht eine der
           `--surface-*`-Stufen. Eine Rolle, weil es sie mehrfach gibt:
           Einstellungen, Bildergalerie, Loeschdialog. */
        --scrim: rgb(0 0 0 / 0.62);
        --surface-active: var(--surface-selected);

        /* Die Flaeche eines aufgeklappten Menues. Etwas waermer und heller
           als --surface-raised, damit ein Menue vor dem Panel steht statt
           darin zu verschwinden. Am Vorbild abgegriffen: #313130. Der
           vorige Wert (oklch 13.4% 0.004 100) war eine Fehlrechnung — er
           kam als #080806 heraus, praktisch schwarz, nicht als #20201f,
           das der Kommentar nannte. */
        --surface-menu: oklch(31.28% 0.00176 105.996);    /* #313130 */

        /* Die Flaeche des Composers im AI-Trading-Chat — waermer als
           --surface-raised (das neutrale Grau). Am Vorbild abgegriffen:
           #20201f. */
        --surface-composer: oklch(24.314% 0.00187 106.169);    /* #20201f */

        /* Ink. */
        --ink-primary: oklch(100% 0 0);
        /* Warm, nicht neutral. Am Vorbild abgegriffen: #c3c2a9. Die Flaechen
           bleiben bei Saettigung 0 — die Waerme sitzt allein in der Schrift,
           und genau dadurch wirkt sie. Ein warmer Grund unter warmer Schrift
           waere Sepia.
           Kontrast gemessen: 10,4:1 auf --surface-canvas, 9,0:1 auf
           --surface-menu. */
        --ink-secondary: oklch(78.9% 0.028 100);   /* #c3c2a9 */
        --ink-muted: oklch(60.7% 0.024 100);       /* #8f8e7d - 4,92:1 auf --surface-menu */
        --ink-inverse: var(--accent-ink);

        /* Lines. */
        --line-subtle: oklch(100% 0 0 / 0.055);
        --line: oklch(100% 0 0 / 0.09);
        --line-strong: oklch(100% 0 0 / 0.16);
        --line-focus: var(--accent);
        /* STEP_02C B.2: der weiche Fokusrand einer GROSSEN Eingabe. `--accent`
           ist Fast-Weiss; als 2-px-Ring um den Composer war das beim Tippen
           ein greller Kasten. Diese Stufe liegt knapp ueber `--line-strong`,
           damit man den Wechsel sieht, aber nicht angeschrien wird. Sie ist
           KEIN Ersatz fuer `--line-focus`: der `:focus-visible`-Ring der
           Knoepfe, Felder und Menueeintraege bleibt deutlich. */
        --line-focus-soft: oklch(100% 0 0 / 0.14);

        /* Der gewaehlte Zustand eines Bedienelements — Umschalter, Reiter.
           Das ist ein ZUSTAND, keine Flaechenstufe: als Schicht laege er
           neun OKLCH-Punkte ueber `--surface-panel` und risse R1 („die
           kleine Stufe") auf. Er darf deshalb nie einen Bereich fuellen,
           nur ein Bedienelement. Gemessen an der Vorlage: #343434. */
        --control-selected: #363636;

        /* Neutral accent — never used on financial data. */
        --accent: oklch(93.1% 0 0);
        --accent-hover: oklch(97.015% 0 0);
        --accent-ink: oklch(19.125% 0 0);
        --accent-subtle: oklch(26.862% 0 0);

        /* Financial and state signals. */
        --signal-up: oklch(75% 0.145 150);
        --signal-up-surface: oklch(75% 0.145 150 / 0.12);
        --signal-up-line: oklch(75% 0.145 150 / 0.30);
        --signal-down: oklch(67% 0.180 27);
        --signal-down-surface: oklch(67% 0.180 27 / 0.12);
        --signal-down-line: oklch(67% 0.180 27 / 0.30);
        --signal-warn: oklch(79% 0.120 80);
        --signal-warn-surface: oklch(79% 0.120 80 / 0.12);
        --signal-warn-line: oklch(79% 0.120 80 / 0.30);

        /* ADHD: speech modes and entry types, requested 15.09.2026. */
        --adhd-voice: oklch(78% 0.105 245);
        --adhd-thought: oklch(79% 0.10 310);
        --adhd-question: oklch(79% 0.09 185);
        --adhd-ink-secondary: oklch(77% 0 0);
        --adhd-ink-muted: oklch(65% 0 0);
        /* Open speech cloud: the white/mint palette of logo-mark.svg. */
        --adhd-cloud-pearl: #EDEBE6;
        --adhd-cloud-mint: #3BE8B0;
        --adhd-cloud-jade: #0DA678;
        --adhd-cloud-core: var(--ink-primary);

        /* Die Zeichenfarben des Live-Scanners. Sie sind die eine Stelle im
           Projekt, an der Farbe frei gewaehlt wird und keine Bedeutung
           traegt, die das Statut vergibt: sie gehoeren der Zeichnung des
           Nutzers, nicht der Oberflaeche — wie die Farbe eines Stifts.
           Sie stehen trotzdem hier und nicht im Kanal, weil §7 keine Farbe
           ausserhalb dieser Datei zulaesst, auch nicht in JavaScript.
           scanner_chart.js loest sie beim Start ueber `data-role` auf; der
           gespeicherte Wert an einer Zeichnung ist eine feste Farbe, weil
           eine Leinwand kein var() kennt. */
        /* Indikatorlinien im Chart. Sie sind KEIN Finanzsignal — ein VWAP
           steigt nicht und faellt nicht, er liegt da. Deshalb weder Gruen
           noch Rot (R2 bleibt unberuehrt), aber auch nicht grau: zwei
           ueberlagerte graue Linien kann man nicht auseinanderhalten.
           Gedaempft genug, um hinter den Kerzen zu bleiben. */
        --ind-primary: oklch(72% 0.12 250);     /* VWAP */
        --ind-secondary: oklch(70% 0.13 300);   /* EMA 9 */

        --draw-white: oklch(100% 0 0);
        --draw-cyan: oklch(76% 0.115 178);
        --draw-green: oklch(84% 0.176 145);
        --draw-orange: oklch(78% 0.163 68);
        --draw-red: oklch(63% 0.229 27);
        --draw-purple: oklch(72% 0.155 297);
        --draw-blue: oklch(76% 0.125 232);
        --draw-yellow: oklch(83% 0.157 83);

        /* Scanner chart palette — STIL.md §9, 06.09.2026. */
        --chart-canvas: #0f0f0f;
        --chart-panel: #141414;
        --chart-menu: #1e1e1e;
        --chart-hover: #2a2a2a;
        --chart-selected: #343434;
        --chart-ink: #ffffff;
        --chart-muted: #c4c7ce;
        --chart-grid: rgba(255, 255, 255, 0.045);
        --chart-line: rgba(255, 255, 255, 0.12);
        --chart-crosshair: #787b86;
        --chart-up: #00b89c;
        --chart-down: #ff3347;
        --chart-warn: #ffb74d;
        --chart-up-label: #00796b;
        --chart-down-label: #c62842;
        --chart-vwap: #2962ff;
        --chart-vwap-band: #4caf50;
        --chart-vwap-fill: rgba(76, 175, 80, 0.06);
        --chart-session-overnight: #8a72d8;
        --chart-ema: #2962ff;
        --chart-rsi: #b388ff;
        --chart-font: var(--font-ui);

        /* Typography. */
        --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-data: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
        --font-weight-regular: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --text-2xs: 12px;
        --text-xs: 13px;
        --text-sm: 14px;
        --text-base: 16px;
        --text-lg: 18px;
        --text-xl: 23px;
        --text-2xl: 23px;
        --line-height-prose: 1.68;
        --measure-prose: 70ch;

        /* Form control marks — STIL.md §5.2. Shapes, not colors: they are
           applied as `mask-image`, so the ink comes from a token and never
           from the graphic. Drawn on the §5.1 grid: viewBox 0 0 24 24,
           `fill: none`, stroke-width 1.5, round caps and joins. */
        --mark-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.25L9.5 17.25L19.5 6.75'/%3E%3C/svg%3E");
        --mark-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
        --mark-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6.5 12H17.5'/%3E%3C/svg%3E");

        /* Icon sizes — die Leiter. STIL.md §5 nennt 14/16/18/20;
           STEP_02C A.1 nimmt 24 dazu, weil es eine Stelle gibt, an der ein
           Icon wirklich gross ist (leerer Kanal, Fehlerbild). */
        --icon-sm: 14px;
        --icon-md: 16px;
        --icon-lg: 18px;
        --icon-xl: 20px;
        --icon-2xl: 24px;

        /* Icon-Rollen — DAS hier benutzt das Markup, nicht die Leiter oben.
           Eine Groesse wird nach dem Ort gewaehlt, an dem das Icon sitzt,
           nicht nach einer Zahl, die am Aufrufort erraten wird.
           STEP_02C A.1: Navigation und Bedienleiste standen bei 14–16 px,
           das war der Grund fuer „zu klein". */
        --icon-nav: var(--icon-lg);       /* 18px — Kanalliste, Bedienleiste, Kopfzeile, Menue */
        --icon-inline: var(--icon-sm);    /* 14px — Zeitstempel, Hinweise, Kleinkram im Fliesstext */
        --icon-feature: var(--icon-2xl);  /* 24px — nur wo etwas wirklich gross ist */

        /* Strichstaerke eines SELBST gezeichneten Icons auf dem 24er-Raster.
           STEP_02C A.1 hebt sie von 1,5 auf 1,75.

           Warum das nicht neben Phosphor auffaellt: Phosphor liegt als
           Webfont vor (regular = 16/256 Einheiten, auf 24 gerechnet also
           genau 1,5) und wird als Schrift gerastert — mit
           `-webkit-font-smoothing: antialiased` aus base.css faellt eine
           Glyphe optisch leichter aus als ein SVG-Strich derselben
           Nennstaerke. 1,75 gleicht das aus; es ist optische, nicht
           rechnerische Gleichheit. Phosphor selbst laesst sich nicht
           nachziehen — es ist eine Schrift, und `bold` verbietet STIL.md §5. */
        --icon-stroke: 1.6;

        /* Motion — STIL.md §6. */
        --dur-instant: 100ms;
        --dur-fast: 160ms;
        --dur-base: 220ms;
        --dur-slow: 320ms;
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-in-out: var(--ease-standard);

        /* Spacing — STEP_00_FUNDAMENT.md §C. */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;
        --space-6: 32px;
        --space-7: 48px;

        /* Comfort density — shell, chat, journal. */
        --radius-panel: 10px;
        --radius-control: 8px;
        --radius-chip: 6px;
        --row-h: 40px;

        /* Named stacking order. `--z-local` is the one step inside a
           component — a sticky list header, an active marker. It is not
           part of the global order and must never be used to lift
           something above another component. */
        --z-local: 1;
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-modal-backdrop: 300;
        --z-modal: 400;
        --z-toast: 500;
        --z-tooltip: 600;
    }

    /* ── Hell ─────────────────────────────────────────────────────────
       Die helle Fassung derselben Rollen. Bis hierher gab es sie nicht:
       hell definierte nur der Altbestand (theme.css) — und dort nur seine
       eigenen Namen (--bg-*, --text-*, --border-*). Die neuen Flaechen
       (--surface-*) blieben dunkel, waehrend die Schrift auf Dunkel
       umschaltete: dunkle Flaeche, dunkle Schrift.

       Gestapelt wird wie im Dunklen, nur andersherum: der Grund ist der
       hellste, jede Stufe darueber liegt naeher an der Schrift. Der
       Akzent ist ein dunkler Neutralton, kein Farbton — Farbe bleibt
       Geld und Zustand vorbehalten (STIL R2). Die Signalfarben sind fuer
       Kontrast auf Weiss abgedunkelt. */
    html[data-theme="light"] {
        --surface-canvas: #ffffff;
        --surface-panel: #f8f9fa;
        --surface-raised: #f1f3f5;
        --surface-hover: #e9ecef;
        --surface-selected: #dee2e6;
        --surface-overlay: #ffffff;
        --surface-menu: #ffffff;
        --surface-composer: #f1f3f5;
        --surface-active: var(--surface-selected);
        --control-selected: #dee2e6;

        /* Der abgedunkelte Grund hinter Dialogen. heller als im Dunklen,
           damit ein heller Dialog nicht in einem schwarzen Loch steht. */
        --scrim: rgb(0 0 0 / 0.45);

        --ink-primary: #1a1a2e;
        --ink-secondary: #5c5c6d;
        /* 5,0 : 1 auf der hellsten Flaeche (#f1f3f5) — der alte Wert
           (#8e8ea0) lag bei 3,2 : 1. */
        --ink-muted: #67677a;

        --line-subtle: rgb(0 0 0 / 0.055);
        --line: rgb(0 0 0 / 0.09);
        --line-strong: rgb(0 0 0 / 0.16);
        --line-focus: var(--accent);
        --line-focus-soft: rgb(0 0 0 / 0.14);

        --accent: #1f1f1f;
        --accent-hover: #333333;
        --accent-ink: #ffffff;
        --accent-subtle: #e8e8e8;

        --signal-up: #0f7a52;
        --signal-up-surface: rgb(15 122 82 / 0.10);
        --signal-up-line: rgb(15 122 82 / 0.30);
        --signal-down: #c0392b;
        --signal-down-surface: rgb(192 57 43 / 0.10);
        --signal-down-line: rgb(192 57 43 / 0.30);
        --signal-warn: #9a6a15;
        --signal-warn-surface: rgb(154 106 21 / 0.10);
        --signal-warn-line: rgb(154 106 21 / 0.30);
    }

    [data-density="terminal"] {
        /* STIL.md §9.3 nennt hier 4 und 3 px, nicht 2 — „ein Werkzeugkasten
           ist ein Kasten", aber eine Kante, die gar keinen Radius hat,
           franst bei 1 px Rahmen sichtbar aus. Gruppe 4 hat die Dichte
           zum ersten Mal produktiv gesetzt und die Werte dabei auf das
           Statut gezogen. */
        --radius-panel: 4px;
        --radius-control: 3px;
        --radius-chip: 2px;
        --row-h: 22px;
        --space-1: 4px;
        --space-2: 4px;
        --space-3: 8px;
        --space-4: 12px;
        --space-5: 16px;
        --space-6: 24px;
        --space-7: 32px;
        --text-2xs: 10px;
        --text-xs: 11px;
        --text-sm: 12px;
        --text-base: 13px;
        --text-lg: 14px;
        --text-xl: 16px;
        --text-2xl: 18px;

        /* Nur die Rollen ruecken mit, nicht die Leiter — sonst wandert
           jedes `--icon-sm` im Altbestand ungefragt mit. */
        --icon-nav: var(--icon-md);       /* 16px */
        --icon-inline: 12px;              /* nicht kleiner — darunter ist eine Form keine Form mehr */
        --icon-feature: var(--icon-xl);   /* 20px */
    }

    /* Chart-only roles: the shell and AI panel keep their existing palette. */
    .chart-overlay {
        --surface-canvas: var(--chart-canvas);
        --surface-panel: var(--chart-canvas);
        --surface-raised: var(--chart-panel);
        --surface-overlay: var(--chart-menu);
        --surface-menu: var(--chart-menu);
        --surface-hover: var(--chart-hover);
        --surface-selected: var(--chart-selected);
        --control-selected: var(--chart-selected);
        --ink-primary: var(--chart-ink);
        --ink-secondary: var(--chart-ink);
        --ink-muted: var(--chart-muted);
        --line-subtle: var(--chart-grid);
        --line: var(--chart-line);
        --signal-up: var(--chart-up);
        --signal-down: var(--chart-down);
        --signal-warn: var(--chart-warn);
        --signal-up-surface: color-mix(in srgb, var(--chart-up) 16%, transparent);
        --signal-down-surface: color-mix(in srgb, var(--chart-down) 16%, transparent);
        --signal-up-line: color-mix(in srgb, var(--chart-up) 45%, transparent);
        --signal-down-line: color-mix(in srgb, var(--chart-down) 45%, transparent);
        --font-data: var(--chart-font);
        --font-label: var(--chart-font);
    }

    /* Legacy theme.css aliases — removed area by area in redesign groups 1–4. */
    :root {
        --bg-base: var(--surface-canvas);
        --bg-primary: var(--surface-canvas);
        --bg-secondary: var(--surface-panel);
        --bg-tertiary: var(--surface-raised);
        --bg-elevated: var(--surface-overlay);
        --bg-card: var(--surface-panel);
        --bg-hover: var(--surface-hover);
        --bg-active: var(--surface-active);
        --bg-selected: var(--surface-selected);
        --bg-modifier-hover: var(--surface-hover);
        --bg-modifier-active: var(--surface-active);
        --bg-modifier-selected: var(--surface-selected);

        --border: var(--line);
        --border-color: var(--line);
        --border-strong: var(--line-strong);
        --border-hover: var(--line-strong);
        --border-active: var(--line-strong);
        --border-focus: var(--line-focus);

        --text-primary: var(--ink-primary);
        --text-secondary: var(--ink-secondary);
        --text-muted: var(--ink-muted);
        --text-link: var(--accent);
        --text-normal: var(--ink-primary);

        --accent-dim: var(--accent-subtle);
        --accent-glow: var(--line-subtle);
        --success: var(--signal-up);
        --danger: var(--signal-down);
        --warning: var(--signal-warn);
        --purple: var(--accent);

        --grid-color: var(--line-subtle);
        --noise-opacity: 0;
        --scrollbar-thin-thumb: var(--line-strong);
        --scrollbar-auto-thumb: var(--line-strong);
        --scrollbar-auto-track: transparent;

        --channel-default: var(--ink-secondary);
        --channel-hover: var(--ink-primary);
        --channel-selected: var(--ink-primary);
        --brand-green: var(--signal-up);
        --brand-red: var(--signal-down);
        --brand-yellow: var(--signal-warn);
        --brand-blue: var(--accent);

        --bot-accent: var(--accent);
        --bot-accent-strong: var(--accent-hover);
        --bot-text-muted: var(--ink-secondary);
        --bot-surface: var(--surface-raised);
        --bot-surface-strong: var(--surface-selected);
        --bot-border: var(--line);
        --bot-border-soft: var(--line-subtle);
        --bot-glow: var(--line-subtle);
        --bot-success-bg: var(--signal-up-surface);
        --bot-success-border: var(--signal-up-line);
        --bot-success-text: var(--signal-up);
        --bot-error-bg: var(--signal-down-surface);
        --bot-error-border: var(--signal-down-line);
        --bot-error-text: var(--signal-down);
        --bot-chart-border: var(--line);
        --human-avatar-bg: var(--accent-subtle);
        --human-avatar-border: var(--line);

        --space-xs: var(--space-1);
        --space-sm: var(--space-2);
        --space-md: var(--space-4);
        --space-lg: var(--space-5);
        --space-xl: var(--space-6);
        --radius-sm: var(--radius-chip);
        --radius-md: var(--radius-control);
        --radius-lg: var(--radius-panel);
        --radius-pill: var(--radius-chip);
        --shadow-sm: none;
        --shadow-lg: none;
        --signal-up-bg: var(--signal-up-surface);
        --signal-up-border: var(--signal-up-line);
        --signal-down-bg: var(--signal-down-surface);
        --signal-down-border: var(--signal-down-line);
        --signal-warn-bg: var(--signal-warn-surface);
        --signal-warn-border: var(--signal-warn-line);
        --font-label: var(--font-data);
        --label-size: var(--text-2xs);
        --label-tracking: normal;
        --font-prose: var(--font-ui);
    }
}