/* ==========================================================================
   ASSESSOR Design Tokens
   --------------------------------------------------------------------------
   EINZIGE QUELLE FÜR FARBEN, MASSE, RADIEN, SCHATTEN, TYPOGRAFIE.

   Regeln:
   - Ausserhalb dieser Datei existiert KEIN Hex-Wert, KEIN rgb(), KEIN hsl().
   - Ausserhalb dieser Datei existiert KEIN px-Wert fuer Abstaende, Hoehen,
     Radien oder Schriftgroessen. Nur var(--token).
   - 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.
   ========================================================================== */

@layer tokens {

:root {
  /* ---------- Typografie ---------- */
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-donut-display: "Bahnschrift Condensed", "Arial Narrow", "Aptos Narrow", "Segoe UI", sans-serif;

  /* ---------- Verbindlicher Donut-Standard ---------- */
  --donut-rack-surface: #17191D;
  --donut-card-surface: #202329;
  --donut-card-surface-end: #1B1E22;
  --donut-track: #373B42;
  --donut-border: #3F444C;
  --donut-value: #F0F2F5;
  --donut-label: #B7BAC0;
  --donut-all: #348CF2;
  --donut-deviation: #F0AC00;
  --donut-passed: #3DA96C;
  --donut-not-applicable: #7B36F3;
  --donut-not-run: #8A8E95;
  --donut-error: #F23C47;
  --donut-rack-shadow: 0 10px 28px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --donut-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.24);
  --donut-rack-radius: 10px;
  --donut-card-radius: 8px;
  --donut-card-min-h: 196px;
  --donut-ring-size: 128px;
  --donut-ring-stroke: 11px;
  --donut-title-size: 16px;
  --donut-value-size: 28px;
  --donut-percent-size: 17px;

  --fs-micro: 11px;   /* Badges, Spaltenkoepfe, Zaehler */
  --fs-sm: 12px;      /* Tabellenzellen, Sekundaertext, Facetten */
  --fs-base: 13px;    /* Controls, Standardtext, Listenzeilen */
  --fs-md: 14px;      /* Objekttitel (Tile, ListRow, Inspector) */
  --fs-lg: 16px;      /* Panel- und Detailtitel */
  --fs-xl: 18px;      /* Seitentitel in der Topbar. Groesster Wert im System. */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --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;
  --app-grid-size: 22px 22px;

  /* ---------- 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;

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

  /* ---------- Form ---------- */
  --radius-xs: 2px;   /* Badges, Chips */
  --radius-sm: 3px;   /* Inputs, Selects, Tiles, Zeilen */
  --radius-md: 4px;   /* Overlays: Dialog, Floating Window, Popover */
  /* Groessere Radien existieren nicht. Panels und Shell: 0. */

  /* Verbindliche Buttonform, gilt fuer jede Schaltflaeche unabhaengig von
     ihrer Farbe (Nutzerentscheidung vom 2026-08-05). Abgerundete Ecken,
     knapper Innenabstand oben und unten. Keine Ansicht setzt eigene
     Buttonhoehen, -radien oder -polster. Ausgenommen sind nur zusammen-
     gesetzte Reiter (View-Tabs, Sidebar-Navigation). */
  --btn-radius: 4px;
  --btn-h: 28px;
  --btn-pad-x: 12px;

  --bw-hairline: 1px;
  --bw-emphasis: 2px; /* Rahmen bei Auswahl und Fokus */
  /* Markierungsstrich: farbige linke Kante, die ein Objekt als aktiv,
     ausgewaehlt oder zugehoerig markiert. Eine Breite fuer die gesamte App,
     Referenz ist die Kante des Result-Fensters. Nie ein anderer Wert. */
  --marker-width: 8px;

  /* ---------- Motion ---------- */
  --dur-fast: 90ms;
  --dur-base: 140ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 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, kein Widget fuehrt
     einen eigenen Grundton - auch der Donut-Rack nicht:
       Hintergrund #242426 - die Flaeche, auf der alles liegt
       Element     #323238 - alles, was darauf sitzt und bedient wird
       Textbox     #1A1A1C - eingesenkt, hier wird geschrieben
     Hover und Aktiv sind keine Grundfarben, sondern zwei Helligkeitsstufen
     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 */
  --surface-selected: #3A3348;      /* violett getoent */
  --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(183, 186, 192, 0.28);
  --graph-finding: #E9A63C;
  --graph-technique: #89939C;
  --graph-tactic: #8B6EF5;
  --graph-selected: #FFFFFF;

  /* Rahmen */
  --border-subtle: #26262C;         /* Zellen-, Zeilentrenner */
  --border-default: #33333B;        /* Controls, Tiles, Panels */
  --border-strong: #4A4A55;         /* Overlays, Hover-Rahmen */

  /* Text. Zwei Grundfarben, in jedem Panel dieselben:
       Schrift          #E2DFE6 (13.0:1 auf #242426, 9.5:1 auf #323238)
       abgesetzte Schr. #B7BAC0 ( 7.9:1 auf #242426, 6.5:1 auf #323238)
     Sekundaer und gedaempft sind derselbe Ton. */
  --text-primary: #E2DFE6;
  --text-secondary: #B7BAC0;
  --text-muted: #B7BAC0;
  --text-disabled: #55555E;
  --text-inverse: #0D0D10;
  --text-link: #7FA9F0;

  /* Akzent: ausschliesslich UI-Primaeraktion und Aktivzustand.
     NIE fuer Severity, NIE fuer Erfolg, NIE fuer Markierung. */
  --accent: #7C5CF5;
  --accent-hover: #8E73F7;
  --accent-active: #6845DE;
  --accent-on: #FFFFFF;
  --accent-subtle: #241C3F;

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

  /* Standardgelb der Anwendung. Jede gefuellte Schaltflaeche traegt genau
     diesen Ton - in Dark wie in Light (Nutzerentscheidung vom 2026-08-05).
     Bewusst getrennt vom Command Band: beide sind gelb, aber das Band ist
     eine Modusflaeche und der Button eine Aktion. */
  --button-accent: #E9A63C;
  --button-accent-hover: #F0B252;
  --button-accent-text: #000000;
  --band-border: #A66E12;
  --band-text: #17130A;

  /* Severity: ausschliesslich gefuellte Badges mit Textlabel */
  --sev-critical: #E8214F;
  --sev-high: #E2680F;
  --sev-medium: #C99700;
  --sev-low: #2E9E6B;
  --sev-info: #3D8FD1;
  --sev-unknown: #6E6E78;
  --sev-on: #FFFFFF;

  /* Outcome: ausschliesslich Textfarbe plus Glyph, nie gefuellt.
     Bewusst OHNE Gruen, damit keine Kollision mit Severity low entsteht. */
  --outcome-fail: #F2607F;
  --outcome-pass: #A9A9B4;
  --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 */
  --selection-border: var(--accent);
  --selection-marker: var(--accent);

  /* Datenvisualisierung, kategorial. Nie fuer Zustaende verwenden. */
  --viz-1: #7C5CF5;
  --viz-2: #3D8FD1;
  --viz-3: #1FA89E;
  --viz-4: #C99700;
  --viz-5: #E2680F;
  --viz-6: #B45BC4;
  --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. */
  --donut-rack-surface: #E7E9ED;
  --donut-card-surface: #FFFFFF;
  --donut-card-surface-end: #F3F4F6;
  --donut-track: #D5D8DE;
  --donut-border: #B9BEC7;
  --donut-value: #20242A;
  --donut-label: #555B65;
  --donut-all: #1C70C9;
  --donut-deviation: #9A6500;
  --donut-passed: #1F7F4B;
  --donut-not-applicable: #6D2CE8;
  --donut-not-run: #626873;
  --donut-error: #D42836;
  --donut-rack-shadow: 0 8px 22px rgba(23, 25, 29, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --donut-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 2px 7px rgba(23, 25, 29, 0.12);
  --surface-app: #F1F1F4;
  --surface-shell: #E4E4EA;
  --surface-panel: #FFFFFF;
  --surface-panel-raised: #F7F7F9;
  --surface-input: #FFFFFF;
  --surface-hover: #EDEDF2;
  --surface-active: #E3E3EA;
  --surface-selected: #EAE4FC;
  --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(69, 73, 82, 0.26);
  --graph-finding: #B87400;
  --graph-technique: #65717C;
  --graph-tactic: #6844D8;
  --graph-selected: #111116;

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

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

  --accent: #5B34D9;
  --accent-hover: #4A28BE;
  --accent-active: #3F1FA8;
  --accent-on: #FFFFFF;
  --accent-subtle: #EDE7FD;

  --band-surface: #E9A63C;
  --band-surface-hover: #F0B252;
  --band-surface-active: #D8942A;

  /* Standardgelb, identisch zum dunklen Skin. */
  --button-accent: #E9A63C;
  --button-accent-hover: #F0B252;
  --button-accent-text: #000000;
  --band-border: #B37B18;
  --band-text: #17130A;

  --sev-critical: #CE0038;
  --sev-high: #BE4A00;
  --sev-medium: #A16207;
  --sev-low: #0B7A3E;
  --sev-info: #0B6BB0;
  --sev-unknown: #5C5C66;
  --sev-on: #FFFFFF;

  --outcome-fail: #C60F3E;
  --outcome-pass: #55555F;
  --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;
  --selection-border: var(--accent);
  --selection-marker: var(--accent);

  --viz-1: #5B34D9;
  --viz-2: #2A6FA8;
  --viz-3: #10756D;
  --viz-4: #8F6B00;
  --viz-5: #B85206;
  --viz-6: #92389F;
  --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;
  }
}

}