/* ==========================================================================
   ASSESSOR Design Tokens
   --------------------------------------------------------------------------
   Verbindliche aktuelle Tokenquelle; Skill-Assets sind historische Referenzen.

   EINZIGE QUELLE FÜR FARBEN, MASSE, RADIEN, SCHATTEN, TYPOGRAFIE.

   Regeln:
   - Ausserhalb dieser Datei existiert kein roher Farbwert.
   - Ausserhalb dieser Datei existiert kein px-Wert fuer Abstaende, Hoehen,
     Radien oder Schriftgroessen. Nur Token-Referenzen.
   - Dark und Light rendern aus IDENTISCHEN semantischen Rollen.
     Ein Light-Mode-Fix per Selektor-Override ist ein Fehler.
   - Neue Farbe noetig? Erst semantische Rolle definieren, dann beide Themes
     befuellen. Nie einen Einzelwert im Komponenten-CSS.

   Uebergang: der Altbestand fuehrt seine Masse und Akzentfarben unter
   `--legacy-*` weiter (src/styles/tokens.css). Diese Namen verschwinden,
   sobald die jeweilige Ansicht auf dieses Tokenset umgestellt ist.
   ========================================================================== */

@layer tokens {

:root {
  /* ---------- Typografie ---------- */
  /* Inter wird lokal mit dem Client-Build ausgeliefert. Auch Datenwerte und
     Rohansichten verwenden dieselbe Familie; Hierarchie entsteht nicht durch
     wechselnde Schriften, sondern ausschliesslich durch Groesse und Gewicht. */
  --activity-panel-width: 560px;
  --filter-search-figure-size: 88px;
  --pathfinder-details-width: clamp(270px, 21vw, 340px);
  --pathfinder-stage-min-width: 360px;

  --font-ui: "Inter Variable", sans-serif;
  --font-mono: var(--font-ui);
  /* User-requested path-only exception; no external font dependency. */
  --font-path: ui-monospace, Consolas, "Liberation Mono", monospace;
  --font-donut-display: var(--font-ui);

  /* Semantische Typografierollen. Diese Rollen sind die verbindliche Quelle
     fuer neue Ansichten; die darunterliegende fs-Skala bleibt nur als
     Kompatibilitaetsschicht fuer bereits migrierte Komponenten bestehen. */
  --type-h1-size: 56px;
  --type-h2-size: 32px;
  --type-h3-size: 18px;
  --type-detail-title-size: 20px;
  --type-h4-size: 16px;
  --type-body-size: 16px;
  --type-table-body-size: 14px;
  --type-label-size: 12px;
  --type-meta-size: 12px;
  --type-badge-size: 11px;
  --type-table-head-size: 12px;
  --type-button-size: 13px;

  /* ---------- Verbindlicher Donut-Standard ---------- */
  /* Racks und andere Segmente sind reine, transparente Layoutgruppen.
     Karte = Element, Ringspur = eingesenkt. */
  /* ---------- Verbindliche Segment-/Kachelgrammatik ---------- */
  --segment-surface: transparent;
  --segment-border: transparent;
  --segment-radius: 10px;
  --segment-inset: var(--space-3);
  --segment-gap: var(--space-3);
  --tile-surface: #323238;
  --tile-surface-hover: #3A3A42;
  --tile-border: transparent;
  /* Trennlinien innerhalb einer Kachel (Faktenzellen). */
  --tile-divider: var(--border-subtle);
  --tile-selected-border: var(--marking-color);
  --tile-radius: var(--radius-sm);
  --tile-inset: var(--space-4);
  --tile-compact-width: 186px;
  --tile-double-compact-width: calc(var(--tile-compact-width) * 2);
  --tile-environment-min-width: 260px;
  --tile-content-width: 358px;
  --tile-content-min-height: 223px;
  --tile-card-shadow: none;

  /* Client Info uses the same theme and semantic status roles as Work.
     Compatibility aliases retain existing chart consumers, not a local palette. */
  --client-info-canvas: var(--surface-app);
  --client-info-surface: var(--surface-input);
  --client-info-surface-raised: var(--tile-surface);
  --client-info-surface-hover: var(--tile-surface-hover);
  --client-info-text: var(--text-primary);
  --client-info-muted: var(--text-secondary);
  --client-info-line: var(--border-default);
  --client-info-line-strong: var(--border-strong);
  --client-info-amber: var(--sev-medium);
  --client-info-red: var(--sev-critical);
  --client-info-green: var(--state-done);
  --client-info-purple: var(--donut-not-applicable);
  --client-info-blue: var(--donut-all);
  --client-info-lime: var(--state-done);
  --client-info-neutral: var(--donut-not-run);

  --donut-rack-surface: var(--segment-surface);
  --donut-card-surface: var(--tile-surface);
  --donut-card-surface-end: var(--tile-surface);
  --donut-track: #555B65;
  --donut-border: var(--segment-border);
  --donut-value: #E2DFE6;
  --donut-label: #B7BAC0;
  --donut-all: #348CF2;
  --donut-deviation: #F0AC00;
  --donut-passed: #3DA96C;
  /* War violett, ersetzt durch einen dedizierten Rosa-Ton, kein Token/Chart-
     Ton darf violett aufloesen (Nutzerentscheidung 2026-09-20). */
  --donut-not-applicable: #C2568A;
  --donut-not-run: #8A8E95;
  --donut-error: #F23C47;
  --donut-rack-shadow: none;
  --donut-card-shadow: var(--tile-card-shadow);
  --donut-rack-radius: var(--segment-radius);
  --donut-card-radius: var(--tile-radius);
  --donut-card-min-h: 196px;
  --donut-ring-size: 128px;
  --donut-ring-stroke: 12px;
  --donut-progress-dash: 0 100;
  --donut-title-size: 16px;
  --donut-value-size: 26px;
  --donut-percent-size: 14px;
  --donut-compact-value-size: 22px;
  --donut-compact-percent-size: 12px;
  --donut-compact-unit-gap: 2px;
  --datahub-readiness-dot-size: 14px;
  --datahub-readiness-dot-inset: var(--space-1);

  --fs-micro: var(--type-badge-size);
  --fs-sm: var(--type-meta-size);
  --fs-base: var(--type-button-size);
  --fs-md: var(--type-table-body-size);
  --fs-lg: var(--type-body-size);
  --fs-xl: var(--type-h3-size);

  /* Pathfinder Micro Card: eigenstaendige, im Graphen begrenzt
     bildschirmstabil skalierte Knotenkarte. Keine allgemeine
     TileCard-Typografie. */
  --pathfinder-micro-title-size: 23px;
  --pathfinder-micro-badge-size: 14px;
  --pathfinder-micro-relation-badge-size: 16px;
  --pathfinder-micro-action-size: 14px;
  --pathfinder-micro-action-group-radius: 8px;
  --pathfinder-micro-action-radius: 6px;
  --pathfinder-micro-connector-backdrop-mix: #000000;
  --pathfinder-micro-action-highlight-mix: #FFFFFF;

  --fw-regular: 400;
  --fw-content-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Kompatibilitaetsname: visuell gibt es keine vierte Gewichtsstufe. */
  --fw-medium: var(--fw-semibold);

  --lh-ui: 1.35;
  --lh-prose: 1.55;

  --ls-caps: 0.06em;  /* nur fuer Versal-Labels in --fs-micro */

  /* ---------- Raster und Abstaende (4px-Basis) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---------- Shell-Masse (in allen Archetypen identisch) ---------- */
  --sidebar-w: 224px;
  --sidebar-w-collapsed: 48px;
  --topbar-h: 44px;
  --band-row-h: 34px;
  --contextstrip-h: 24px;
  --statusbar-h: 24px;
  --inspector-w: 380px;
  --facetrail-w: 236px;
  /* Mindestbreite einer Rasterspalte. Ohne sie fallen breite Scantabellen auf
     Zeichenbreite zusammen, statt waagerecht zu scrollen. */
  --table-col-min-w: 96px;
  /* Verbindlicher Abstand zwischen dem Aussenrand eines abgerundeten Panels
     und seinem Inhalt. Referenz ist Work: 20 px auf allen vier Seiten. Jede
     Ansicht legt genau einen Root-Container in `.viewer`, der diesen Wert
     traegt; bestehende und kuenftige Panels verwenden keine lokalen Ersatzwerte. */
  --panel-content-inset: 20px;
  --panel-inset: var(--panel-content-inset);
  --app-grid-size: 22px 22px;

  /* ---------- Dichte ---------- */
  --control-h: 24px;
  --control-h-sm: 20px;
  --icon-btn: 24px;
  --row-h: 32px;
  --tile-h: 132px;
  --tile-min-w: 260px;

  /* ---------- Form ---------- */
  --radius-xs: 0px;   /* Badges, Chips */
  --radius-sm: 0px;   /* Inputs, Selects, Tiles, Zeilen */
  --radius-md: 0px;   /* Overlays: Dialog, Floating Window, Popover */

  /* ---------- Verbindliche Buttonform ----------
     Gilt fuer jede Schaltflaeche der App, unabhaengig von ihrer Farbe
     (Nutzerentscheidung vom 2026-08-05): abgerundete Ecken und knapper
     Innenabstand oben und unten. Keine Ansicht setzt eigene Buttonhoehen,
     -radien oder -polster. Ausgenommen sind nur zusammengesetzte Reiter
     (View-Tabs, Sidebar-Navigation), die als Gruppe eine eigene Form haben. */
  --btn-radius: 4px;
  --btn-h: 28px;
  --btn-pad-x: 12px;
  /* Groessere Radien existieren nicht. Panels und Shell: 0.
     Einzige Ausnahme: die Reiter der Hauptnavigation. Sie folgen dem
     Preferences-Muster aus Ableton Live, in dem die Rundung die Reiterform
     ueberhaupt erst lesbar macht. 4px ist die Obergrenze der Designsprache. */
  --radius-nav-item: 4px;
  /* Zweite Ausnahme: der Stapel minimierter Results. Die Miniaturen liegen
     kantenlos aufeinander und ergeben nur dann einen erkennbaren Koerper,
     wenn seine Aussenecken gerundet sind - ohne Rundung zerfaellt der Stapel
     optisch in Einzelzeilen. Gilt ausschliesslich fuer die vier Aussenecken,
     nie zwischen den Zeilen. Entscheidung des Nutzers vom 2026-08-03. */
  --radius-result-cluster: 4px;

  --bw-hairline: 1px;
  --bw-emphasis: 2px; /* Rahmen bei Auswahl und Fokus */
  /* Markierungsstrich: die farbige linke Kante, die ein Objekt als aktiv,
     ausgewaehlt oder zugehoerig markiert (aktive Recordzeile, minimiertes
     Result, aktiver Pfadschritt, aktiver Zeitschnitt). Eine Breite fuer die
     gesamte App - Referenz ist die Kante des Result-Fensters.
     Entscheidung des Nutzers vom 2026-08-05. */
  --marker-width: 8px;

  /* ---------- Motion ---------- */
  --dur-fast: 90ms;
  --dur-base: 140ms;
  --dur-data-build: 700ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-data-build: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   DICHTEMODI
   Aendern ausschliesslich Hoehen und Abstaende.
   Niemals Farben, Reihenfolge, Komponententypen oder Informationsmenge.
   ========================================================================== */

:root[data-density="compact"] {
  --control-h: 26px;
  --control-h-sm: 22px;
  --icon-btn: 22px;
  --row-h: 28px;
  --tile-h: 116px;
  --band-row-h: 30px;
}

:root[data-density="reading"] {
  --control-h: 34px;
  --control-h-sm: 30px;
  --icon-btn: 30px;
  --row-h: 40px;
  --tile-h: 148px;
  --band-row-h: 38px;
}

/* ==========================================================================
   THEME: DARK (Standard)
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Flaechen.
     Vier Grundfarben, die in jedem Panel gelten (Nutzerentscheidung vom
     2026-08-05). Kein Panel, keine Kachel, keine Zeile fuehrt einen eigenen
     Grundton:
       Hintergrund - die Flaeche, auf der alles liegt (--surface-app,
                     --surface-panel)
       Element     - alles, was auf der Flaeche sitzt und bedient wird
                     (--surface-panel-raised)
       Textbox     - eingesenkt, hier wird geschrieben (--surface-input)
     Hover und Aktiv sind keine eigenen Grundfarben, sondern zwei Helligkeits-
     stufen ueber dem Element. */
  --surface-app: #242426;           /* Grundfarbe Hintergrund */
  --surface-shell: #1B1B1D;         /* Chrome, kein Panel: Sidebar, Topbar, Statusbar */
  --surface-panel: #242426;         /* Grundfarbe Hintergrund */
  --surface-panel-raised: #323238;  /* Grundfarbe Element */
  --surface-input: #1A1A1C;         /* Grundfarbe Textbox */
  --surface-hover: #3A3A42;         /* Element, Hover */
  --surface-active: #43434C;        /* Element, gedrueckt */
  /* Bernsteingetoente Auswahlflaeche, ersetzt den fruesheren violetten Wert
     (Nutzerentscheidung 2026-09-20). Gemischt aus der Markierungsfarbe, damit
     kein eigener Literalwert entsteht. */
  --surface-selected: color-mix(in srgb, var(--marking-color) 16%, transparent);
  /* Neutrale Auswahlflaeche: oberste Stufe der Elementleiter
     (Element -> Hover -> Auswahl). Der alte Wert lag unter der Hoverstufe und
     war auf dem Elementton nicht mehr zu sehen, sobald die Grundfarben
     vereinheitlicht waren. */
  --surface-selected-flat: #43434C;
  --text-selected-flat: #E2DFE6;
  --text-muted-selected-flat: #B7BAC0;
  --border-selected-flat: var(--marking-color);
  --surface-tab-active: #323238;    /* Grundfarbe Element */
  --text-tab-active: #E2DFE6;
  --surface-results-action: #242426;
  --border-results-action: var(--marking-color);
  --text-results-action: var(--marking-color);
  --surface-overlay: #242426;       /* Dialog, Floating Window, Popover */
  --surface-scrim: rgba(6, 6, 9, 0.62);
  --app-grid-pattern: radial-gradient(circle at 1px 1px, #424248 1px, transparent 0);
  --graph-edge: rgba(104, 143, 181, 0.52);
  --graph-finding: #D9DEE4;
  --graph-unknown: #8EA7C0;
  /* Dediziertes, nicht-violettes Kategorieblau-Gruen fuer Graph-Beziehungsknoten
     und -kanten, ersetzt den fruesheren violetten Wert (Nutzerentscheidung
     2026-09-20). Von keinem Fokus- oder Markierungston abgeleitet. */
  --graph-relation: #4FB8D4;
  --graph-category: #AEB8C3;
  --graph-defense: #789C99;
  --graph-technique: #7E8D9C;
  --graph-tactic: #668BB3;
  --graph-alert: #E45E63;
  --graph-selected: var(--marking-color);
  /* Dedizierter, nicht-violetter Diagramm-/Kategorieton fuer Chart-Flaechen,
     die frueher `--accent` wiederverwendeten (z. B. PKI-Chart-Ton, IOE-Summe).
     Teilt sich den Farbwert mit `--graph-relation`, weil beide dieselbe Rolle
     "dedizierter, nicht violetter Kategorieton" ausfuellen. */
  --chart-tone-emphasis: var(--graph-relation);
  /* Kennzeichnung der Context Engine ausserhalb des Graphen (Punkt vor jedem
     Context-Badge, Nutzerentscheidung 2026-10-01). Gleicher Ton wie die
     Context-Knoten in Pathfinder; kein Fokus-, Markierungs- oder Statuston. */
  --context-marker: var(--graph-relation);

  /* Rahmen: Weiche Konturen; dezenter heller Trennstrich fuer Listen */
  --border-subtle: rgba(255, 255, 255, 0.14);  /* Zellen-, Zeilentrenner */
  --border-default: #383840;        /* Controls, Tiles, Panels */
  --border-strong: #4E4E58;         /* Overlays, Hover-Rahmen */

  /* Button-Tokens (Ableton Live aesthetic: einheitlicher 1px Rahmen, ohne Bunt-Linien) */
  --button-border: #383840;
  --button-bg: #323238;             /* Grundfarbe Element */
  --button-bg-hover: #3A3A42;
  --button-text: #E2DFE6;
  /* Standardgelb der Anwendung. Eine Schaltflaeche, die Farbe traegt, traegt
     genau dieses Gelb - in Dark wie in Light (Nutzerentscheidung 2026-08-05). */
  --button-accent: #E9A63C;
  --button-accent-hover: #F0B252;
  --button-accent-text: #000000;
  --marking-color: #E9A63C;
  /* Expliziter Entscheidungsentwurf an der Accepted-Risk-Aktion. Der Ton ist
     eine eigene fachliche Rolle und wird nicht aus dem Fokusblau abgeleitet. */
  --risk-draft-surface: #0A66C2;
  --risk-draft-surface-hover: #0956A3;
  --risk-draft-text: #FFFFFF;

  /* Sidebar-Navigation (Ableton-Preferences-Muster).
     Nicht gewaehlte Eintraege liegen erhoben ueber der Shell, der gewaehlte
     nimmt exakt die Arbeitsflaeche an und laeuft ohne rechte Kante in sie
     hinein. Der Uebergang ist damit eine Farbrolle, keine Sonderregel im
     Komponenten-CSS. */
  --surface-nav-item: #323238;      /* Grundfarbe Element */
  --surface-nav-item-hover: #3A3A42;
  --surface-nav-active: var(--surface-app);

  /* Text. Zwei Grundfarben, in jedem Panel dieselben:
       Schrift          (--text-primary):   13.0:1 auf Hintergrund, 9.5:1 auf Element
       abgesetzte Schr. (--text-secondary):  7.9:1 auf Hintergrund, 6.5:1 auf Element
     Sekundaer und gedaempft sind derselbe Ton: Hierarchie entsteht ueber
     Groesse, Gewicht und Position, nicht ueber eine dritte Helligkeit. */
  --text-primary: #E2DFE6;
  --text-secondary: #B7BAC0;
  --text-muted: #B7BAC0;
  --text-disabled: #55555E;
  --text-inverse: #0D0D10;
  --text-link: #7FA9F0;

  /* Die violette Akzentfamilie (--accent/-hover/-active/-on/-subtle) ist als
     UI-Rolle vollstaendig entfernt (Nutzerentscheidung 2026-09-20, AGENTS.md
     "UI segments and tiles"). Primaeraktion und Auswahl sind --marking-color,
     Tastaturfokus ist --focus-ring; ein Tool-/Kategorieton bekommt bei Bedarf
     einen eigenen dedizierten Wert (siehe --chart-tone-emphasis). Alle
     ehemaligen Verbraucher sind direkt auf die passende Rolle umgestellt;
     die Tokens sind deshalb geloescht, nicht nur umgeleitet. */

  /* Command Band (Filter- und Analysemodus, Signaturfarbe) */
  --band-surface: #D9962A;
  --band-surface-hover: #E5A33A;
  --band-surface-active: #C4831C;
  --band-border: #A66E12;
  --band-text: #17130A;

  /* Severity: ausschliesslich gefuellte Badges mit Textlabel.
     Diese fuenf Toene sind die Referenz der gesamten Anwendung. Sie gelten
     unveraendert im hellen Skin und in jeder Darstellungsform - Hexagon,
     Badge, Kante, Graphknoten. Eine Severity hat genau eine Farbe. */
  --sev-critical: #E8214F;
  --sev-high: #E2680F;
  --sev-medium: #C99700;
  --sev-low: #2E9E6B;
  --sev-info: #3D8FD1;
  --sev-unknown: #6E6E78;
  --sev-on: #FFFFFF;
  /* Tinte auf einer gefuellten Severity-Flaeche. Die fuenf Toene sind
     durchgehend hell, deshalb traegt die Flaeche dunkle Schrift. Gemessen auf
     11-px-Versaltext: 4.54:1 (critical) bis 7.91:1 (medium). Reines Weiss
     erreichte hier nur 2.65:1 bis 4.41:1 und scheidet damit aus. */
  --sev-ink: #08080A;

  /* Outcome: ausschliesslich Textfarbe plus Glyph, nie gefuellt.
     Pass ist auf Nutzerwunsch gruen; Severity bleibt eine eigene Dimension. */
  --outcome-fail: #F2607F;
  --outcome-pass: #63D69A;
  --outcome-warning: #D9A82A;
  --outcome-error: #E88A45;
  --outcome-idle: #74747F;

  /* Workflow / Review: ausschliesslich Outline-Chip mit Punkt */
  --state-open: #8A8A94;
  --state-progress: #3D8FD1;
  --state-done: #2E9E6B;
  --state-blocked: #E2680F;
  --state-accepted: #74747F;

  /* Systemzustaende, unabhaengig von Severity */
  --state-bookmark: #1FA89E;
  --state-online: #2E9E6B;
  --state-offline: #E8214F;

  /* Interaktion */
  --focus-ring: #4CC2FF;            /* eigenstaendig, kollidiert mit nichts */
  --engines-button-bg: #4CC2FF;
  --engines-button-text: #17171C;
  --engines-dialog-width: 420px;
  --table-row-marking: #4CC2FF;
  --table-row-marking-surface: color-mix(in srgb, var(--table-row-marking) 14%, transparent);
  --selection-border: var(--marking-color);
  --selection-marker: var(--marking-color);
  --search-highlight-bg: #FFE600;
  --search-highlight-text: #000000;
  /* Markierung einer vom Bericht selbst ausgewerteten Belegzeile (z. B.
     CIS-CAT: `<tr class="evaluated">`) - eigenstaendiger Ton, bewusst wie
     der Suchtreffer skinunabhaengig fest, damit die Markierung des
     Originalberichts unveraendert wiedererkennbar bleibt. */
  --evidence-highlight-bg: #CBF8FF;
  --evidence-highlight-text: #000000;
  --criterion-highlight-bg: #176B46;
  --criterion-highlight-text: #FFFFFF;
  --match-highlight-bg: #176B46;
  --match-highlight-text: #FFFFFF;
  --violation-highlight-bg: #981B37;
  --violation-highlight-text: #FFFFFF;

  /* Datenvisualisierung, kategorial. Nie fuer Zustaende verwenden. */
  /* --viz-1 war violett und ist auf Oliv-Gruen umgestellt. --viz-6 lag mit
     seinem frueheren Orchid-Ton farblich zu nah an Violett und ist auf ein
     eindeutiges Pink verschoben (beides Nutzerentscheidung 2026-09-20). */
  --viz-1: #6B9E1F;
  --viz-2: #3D8FD1;
  --viz-3: #1FA89E;
  --viz-4: #C99700;
  --viz-5: #E2680F;
  --viz-6: #D6497A;
  --viz-grid: #2A2A32;

  /* Schatten: ausschliesslich echte Overlays */
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.48);
  --shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.42);
}

/* ==========================================================================
   THEME: LIGHT (gleichwertig, kein Nachgedanke)
   Identische Rollen, eigene Werte. Kontraste gegen die jeweilige
   Nachbarflaeche geprueft: Text >= 4.5:1, Rahmen und Fokus >= 3:1.
   ========================================================================== */

:root[data-theme="light"] {
  color-scheme: light;

  /* Donut-Standard: identische Geometrie, helle Referenzpalette. */
  --segment-surface: transparent;
  --segment-border: transparent;
  /* Gegenueber Reinweiss sichtbar beruhigt: reduziert die Blendwirkung grosser
     Kachelflaechen, bleibt aber heller als der App-Hintergrund und behaelt so
     die helle Ebenenhierarchie. */
  --tile-surface: #F5F5F7;
  /* Hover hellt die Flaeche leicht auf; die Kontur bleibt unveraendert. */
  --tile-surface-hover: #F8F8FA;
  /* Nutzerentscheidung 2026-09-25: Kachel und App-Hintergrund liegen im hellen
     Theme nur eine Nuance auseinander. Eine neutrale Haarlinie traegt deshalb
     die Kachelabgrenzung, ohne eine Flaechenfarbe zu aendern. Das dunkle Theme
     bleibt ohne Kontur, dort traegt der Helligkeitsabstand. */
  --tile-border: #DCDDE3;
  --tile-divider: #D8D9DF;
  --tile-selected-border: var(--marking-color);
  --tile-card-shadow: none;
  --donut-rack-surface: var(--segment-surface);
  --donut-card-surface: var(--tile-surface);
  --donut-card-surface-end: var(--tile-surface);
  --donut-track: #B9BEC7;
  --donut-border: var(--segment-border);
  --donut-value: #20242A;
  --donut-label: #555B65;
  --donut-all: #1C70C9;
  --donut-deviation: #9A6500;
  --donut-passed: #1F7F4B;
  /* War violett, ersetzt durch einen dedizierten Rosa-Ton, kein Token/Chart-
     Ton darf violett aufloesen (Nutzerentscheidung 2026-09-20). */
  --donut-not-applicable: #A13D6C;
  --donut-not-run: #626873;
  --donut-error: #D42836;
  --donut-rack-shadow: none;
  --donut-card-shadow: var(--tile-card-shadow);
  --surface-app: #F1F1F4;
  --surface-shell: #E4E4EA;
  --surface-panel: #FFFFFF;
  --surface-panel-raised: #F7F7F9;
  --surface-input: #FFFFFF;
  --surface-hover: #EDEDF2;
  --surface-active: #E3E3EA;
  /* Bernsteingetoente Auswahlflaeche, ersetzt den fruesheren violetten Wert
     (Nutzerentscheidung 2026-09-20). */
  --surface-selected: color-mix(in srgb, var(--marking-color) 16%, transparent);
  /* Auswahl in Liste und Kachelraster: zurueckhaltende Flaeche, die 2-px-Kante
     traegt die Aussage. Farbe steht damit nicht allein (WCAG 1.4.1). */
  --surface-selected-flat: #E4E4EC;
  --text-selected-flat: #17171C;
  --text-muted-selected-flat: #55555F;
  --border-selected-flat: var(--marking-color);
  /* Aktive Ansicht (View-Tabs): neutrale erhobene Flaeche. Das Chrome bleibt
     farblos, Farbe gehoert den Daten. */
  --surface-tab-active: #FFFFFF;
  --text-tab-active: #17171C;
  /* Results-Aktion: Umriss in der Markenfarbe. Gefuellt wird sie erst im
     geoeffneten Zustand, dann im Ton des zugehoerigen Ergebnisfensters. */
  --surface-results-action: #FFFFFF;
  --border-results-action: var(--marking-color);
  --text-results-action: var(--marking-color);
  --surface-overlay: #FFFFFF;
  --surface-scrim: rgba(24, 24, 30, 0.32);
  --app-grid-pattern: radial-gradient(circle at 1px 1px, #CBCBD3 1px, transparent 0);
  --graph-edge: rgba(55, 92, 128, 0.45);
  --graph-finding: #3F4851;
  --graph-unknown: #58718A;
  /* Dediziertes, nicht-violettes Kategorieblau-Gruen fuer Graph-Beziehungsknoten
     und -kanten, ersetzt den fruesheren violetten Wert (Nutzerentscheidung
     2026-09-20). */
  --graph-relation: #2E93AD;
  --graph-category: #667482;
  --graph-defense: #527A77;
  --graph-technique: #71808E;
  --graph-tactic: #426C97;
  --graph-alert: #C83E45;
  --graph-selected: var(--marking-color);
  /* Dedizierter, nicht-violetter Diagramm-/Kategorieton fuer Chart-Flaechen,
     die frueher `--accent` wiederverwendeten. */
  --chart-tone-emphasis: var(--graph-relation);
  --context-marker: var(--graph-relation);

  --border-subtle: #E2E2E8;
  --border-default: #CFCFD8;
  --border-strong: #A8A8B4;

  /* Button-Tokens (Ableton Live aesthetic: einheitlicher 1px Rahmen, ohne Bunt-Linien) */
  --button-border: #888888;
  --button-bg: #C8C8C8;
  --button-bg-hover: #D5D5D5;
  --button-text: #111111;
  /* Standardgelb, identisch zum dunklen Skin. */
  --button-accent: #E9A63C;
  --button-accent-hover: #F0B252;
  --button-accent-text: #000000;
  --marking-color: #E9A63C;
  --risk-draft-surface: #0A66C2;
  --risk-draft-surface-hover: #0956A3;
  --risk-draft-text: #FFFFFF;

  /* Sidebar-Navigation, siehe Dark-Skin. Gleiche Rollen, eigene Werte:
     der gewaehlte Eintrag ist hier heller als die Shell, weil die
     Arbeitsflaeche im hellen Skin die hellere Ebene ist. */
  --surface-nav-item: #D8D8E0;
  --surface-nav-item-hover: #E4E4EC;
  --surface-nav-active: var(--surface-app);

  --text-primary: #17171C;
  --text-secondary: #55555F;
  --text-muted: #74747F;
  --text-disabled: #A0A0AA;
  --text-inverse: #FFFFFF;
  --text-link: #2A5FBF;

  --band-surface: #E9A63C;
  --band-surface-hover: #F0B252;
  --band-surface-active: #D8942A;
  --band-border: #B37B18;
  --band-text: #17130A;

  /* Severity kennt keinen Skinwechsel: identische Werte wie im dunklen Skin.
     Ein Fund mit derselben Schwere muss in beiden Skins dieselbe Farbe tragen,
     sonst ist ein Screenshot aus dem einen Skin im anderen nicht lesbar. */
  --sev-critical: #E8214F;
  --sev-high: #E2680F;
  --sev-medium: #C99700;
  --sev-low: #2E9E6B;
  --sev-info: #3D8FD1;
  --sev-unknown: #6E6E78;
  --sev-on: #FFFFFF;
  --sev-ink: #08080A;

  --outcome-fail: #C60F3E;
  --outcome-pass: #187447;
  --outcome-warning: #8F6B00;
  --outcome-error: #B85206;
  --outcome-idle: #74747F;

  --state-open: #6E6E78;
  --state-progress: #2A6FA8;
  --state-done: #1E7A50;
  --state-blocked: #B85206;
  --state-accepted: #74747F;

  --state-bookmark: #10756D;
  --state-online: #1E7A50;
  --state-offline: #C60F3E;

  --focus-ring: #0A66C2;
  --engines-button-bg: #0A66C2;
  --engines-button-text: #FFFFFF;
  --table-row-marking: #0A66C2;
  --table-row-marking-surface: color-mix(in srgb, var(--table-row-marking) 14%, transparent);
  --selection-border: var(--marking-color);
  --selection-marker: var(--marking-color);
  --search-highlight-bg: #FFE600;
  --search-highlight-text: #000000;
  --evidence-highlight-bg: #CBF8FF;
  --evidence-highlight-text: #000000;
  --criterion-highlight-bg: #CBEFD9;
  --criterion-highlight-text: #10261A;
  --match-highlight-bg: #CBEFD9;
  --match-highlight-text: #10261A;
  --violation-highlight-bg: #FFD4DB;
  --violation-highlight-text: #4A0714;

  /* --viz-1 war violett und ist auf Oliv-Gruen umgestellt. --viz-6 lag mit
     seinem frueheren Orchid-Ton farblich zu nah an Violett und ist auf ein
     eindeutiges Pink verschoben (beides Nutzerentscheidung 2026-09-20). */
  --viz-1: #4F7A12;
  --viz-2: #2A6FA8;
  --viz-3: #10756D;
  --viz-4: #8F6B00;
  --viz-5: #B85206;
  --viz-6: #B02F5E;
  --viz-grid: #DFDFE6;

  --shadow-overlay: 0 8px 24px rgba(20, 20, 28, 0.18);
  --shadow-popover: 0 4px 12px rgba(20, 20, 28, 0.14);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-data-build: 0ms;
  }
}

}