/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css: der Token-Vertrag der Designsprache „Signal“ (DESIGN.md §2)

   Eine Datei, eine Quelle. Jeder Farb-, Größen-, Abstands-, Radius-, Schatten-
   und Motion-Wert des UI steht hier und nirgends sonst (DESIGN §1.1, §2.1).
   Werte und Namen stammen aus DESIGN.md §2, die Rollen-Tokens aus §2.11 mit
   den Werten aus docs/design-offensive/mockups/src/c.css.

   Hell steht an :root, Dunkel an html[data-theme="dark"]. Rollen, die per
   var() auf Grundwerte zeigen, stehen nur einmal in :root: sie werden am
   selben Element (html) berechnet und folgen damit dem Modus von selbst.

   Geprüft von tests/tokens-vertrag.test.js: jede Rolle in beiden Modi, jeder
   Wert gegen DESIGN.md, die Kontrastpaare aus §2.12 nachgemessen.

   Welle 0 (ENG-175) legt die Datei an. Die Alias-Schicht für die alten Namen
   der App (--text, --muted, --border2 …) ist mit W8 (ENG-182) entfallen: jede
   Stelle liest jetzt die Vertrags-Tokens, und tests/tokens-vertrag.test.js
   hält fest, dass keiner der alten Namen zurückkommt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 2.2 Schrift ─────────────────────────────────────────────────────────── */
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-doc: 'Source Serif 4', Georgia, serif;
  --display-tracking: -0.02em;

  /* Genau sechs Größen. Das UI benutzt keine andere. */
  --fs-xs: 12px;   /* Meta, Zähler, Hinweise, Badge, Label */
  --fs-sm: 13px;   /* Knöpfe, Feldlabels, Sekundärtext, Chat */
  --fs-md: 14px;   /* Basis, Eingaben */
  --fs-lg: 17px;   /* Kartentitel, Dialogtitel (Display) */
  --fs-xl: 22px;   /* Abschnitt, Kennzahl (Display) */
  --fs-2xl: 30px;  /* Seitentitel (Display) */
  /* Die einzige Ausnahme von der Skala: der Landing-Hero. */
  --fs-hero: clamp(30px, 4.2vw, 56px);
  /* Keine Textgröße: mobile Eingabefelder brauchen 16 px, sonst zoomt iOS
     Safari beim Fokus hinein (DESIGN §2.2). Nur in der Mobil-Abfrage. */
  --fs-input-touch: 16px;

  --lh-tight: 1.2;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-strong: 600;

  /* Label-Regel: Satzschreibung, nie Versalien, nie unter 12 px. */
  --label-size: var(--fs-xs);
  --label-weight: 500;
  --label-ink: var(--ink-3);
  --label-tracking: 0.01em;
  --label-case: none;

  /* ── 2.3 Abstand und Maße ────────────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s16: 64px;

  --control-h: 34px;
  --btn-px: 14px;
  --card-pad: 20px 22px;
  --searchpanel-w: 312px;
  --results-max: 1120px;
  --stage-max: 1840px;
  --joblist-gap: 10px;
  /* 12 px nur in Badges und Chevrons in Tabellenköpfen (DESIGN §7). Token
     seit Signal W7, vorher stand die Größe roh im Stil. */
  --ico-xs: 12px;
  --ico-sm: 16px;
  --ico-md: 20px;
  --gutter: 32px;
  --topbar-h: 56px;
  --rail-w: 84px;
  --refcol-w: 340px;
  --dock-w: 390px;
  --match-w: 200px;
  /* Der senkrechte Match-Balken der Trefferkarte (§4.5, W9): breit genug für
     „100 %“ in --fs-lg. */
  --match-bar-w: 48px;
  --desk-gap: var(--s4);
  --ico-stroke: 1.5;
  /* Trefferfläche mobil (§2.3) und Kante der Markenkachel in der Hülle. */
  --touch-min: 44px;
  --brand-tile: 30px;

  /* ── 2.7 Radius ──────────────────────────────────────────────────────────── */
  --r-sm: 6px;     /* Badge, Tag, Menüzeile */
  --r-md: 8px;     /* Knopf, Eingabe, Checkliste, Icon-Knopf */
  --r-lg: 12px;    /* Karte, Panel, Menü, Dialog, Toast, Randnotiz */
  --r-full: 999px; /* Wahl-Pille, Vorschlag, Marke, Avatar */
  --sheet-r: 2px;
  --sheet-top-r: 16px;
  --brand-tile-r: 8px;

  /* ── 2.10 Motion ─────────────────────────────────────────────────────────── */
  --dur-fast: 110ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Ebenen (DESIGN §2.1): die z-Skala der UI-Revision, unverändert ───────
     Umgezogen aus public/index.html (dort seit ENG-136, Welle 0/9). Jede Stufe
     trägt genau den Wert, den die zugehörigen Elemente schon hatten. Ein neues
     z-index gibt es nur mit einer Stufe (tests/overlay-grammatik.test.js).
     Ein modales <dialog> liegt in der Top-Layer und damit über jeder Stufe;
     was darüber stehen muss (Kurzmeldung, Kurzhilfe, Ladeschleier), zieht per
     `popover` ebenfalls in die Top-Layer. Außerhalb der Skala steht nur das
     Seitenlineal, und das lebt im Dokument-iframe, wo dieses :root nicht gilt.
     Die beiden untersten Stufen ordnen NUR Elemente innerhalb eines Blatts
     oder einer Karte untereinander. */
  --z-in-card: 2;              /* ordnet zwei Elemente INNERHALB eines Blatts */
  --z-in-card-top: 3;          /* ... und was davon zuoberst liegt */
  --z-sticky-row: 15;          /* haftende Leiste INNERHALB einer Karte */
  --z-sticky-sub: 20;          /* haftende Leiste einer Untersektion */
  --z-sticky: 30;              /* haftende Kopfleiste einer Ansicht */
  --z-sidebar-foot: 50;        /* feststehender Fuss der Eingabespalte */
  --z-dock: 60;                /* angedocktes Panel neben dem Dokument */
  --z-float: 100;              /* frei schwebend: Chat, Aktionsknopf-Stapel */
  --z-menu: 200;               /* Aufklapp-Menues und Benachrichtigungen */
  --z-bottom-nav: 800;         /* untere Tab-Leiste (mobil) */
  --z-bottom-nav-backdrop: 810;
  --z-bottom-nav-sheet: 820;   /* Blatt, das aus der Tab-Leiste aufgeht */
  --z-sheet-backdrop: 890;
  --z-sheet: 900;              /* Blatt vom unteren Bildrand (Filter, mobil) */
  --z-modal: 1000;             /* Dialog mit Handlungszwang */
  --z-tour: 2000;              /* Produkttour, Vollbild-Nachfragen darueber */
  --z-tour-highlight: 2001;
  --z-tour-pop: 2002;
  --z-nav-hint: 2500;          /* Wegweiser-Blase, zeigt auf die Tour */
  --z-blocking: 3000;          /* blockierender Lauf: Ladeschleier, Zuschnitt */
  --z-toast: 9999;             /* Kurzmeldung, gehoert immer nach ganz oben */
  --z-tip: 10000;              /* Kurzhilfe am Zeiger, liegt ueber allem */

  /* ── 2.4 Farbe hell: Flächen, Text, Linien, Akzent ───────────────────────── */
  --bg: #F2F2F6;
  --surface: #FFFFFF;
  --surface-2: #EFEFF4;
  --surface-3: #E4E4EC;
  --surface-raised: #FFFFFF;
  --line: #E1E1E9;
  --line-strong: #CDCDD8;
  --ink: #111018;
  --ink-2: #363544;
  --ink-3: #5A5969;
  --accent: #5A4BDB;
  --accent-hover: #4A3BCB;
  --accent-ink: #4A3BCB;
  --accent-tint: #EDEBFD;
  --accent-tint-2: #DCD8FB;
  --on-accent: #FFFFFF;
  --hover-bg: #F0F0F5;
  --paper: #FFFFFF;
  --paper-ink: #16151D;
  --para-hover: #F4F3FE;
  /* Bildschirm-Beiwerk IM Blatt (Dokument-iframe), in beiden Modi gleich,
     weil das Papier weiß bleibt: Markierungen der Prüfungen und der
     Hinweistext einer leeren Empfängerzeile. Die App liest sie per
     getComputedStyle und schreibt die Werte ins iframe. */
  --paper-mark: rgba(90,75,219,.18);
  --paper-mark-line: rgba(90,75,219,.75);
  --paper-flag: rgba(230,140,20,.24);
  --paper-flag-line: rgba(230,140,20,.85);
  --paper-placeholder: #9AA0AB;
  --scrim: rgba(10,9,16,.5);
  /* Die Signal-Kante: der einzige erlaubte Verlauf im Produkt. */
  --ai-edge: linear-gradient(90deg, #5A4BDB, #9C8FFF 50%, #5A4BDB);

  /* ── 2.5 Signal und Status ───────────────────────────────────────────────── */
  --success: #177A47;  --success-tint: #E4F4EA;
  --warn: #975707;     --warn-tint: #FDF4E2;  --warn-line: #F0D8A8;
  --danger: #B42318;   --danger-tint: #FDECEA;
  /* Text auf dem Gefahr-Knopf (§4.1: hell #FFFFFF, dunkel #111018). */
  --on-danger: #FFFFFF;

  /* Bewerbungsstatus: Ton auf Tönung, keine Farbe doppelt belegt. Der Entwurf
     trägt den Akzent (er ist Claudes Ergebnis), das Angebot den Erfolg, die
     Absage ist neutral. Deshalb zeigen diese drei auf die Grundrollen. */
  --st-draft: var(--accent-ink);        --st-draft-tint: var(--accent-tint);
  --st-applied: #1F5C99;                --st-applied-tint: #E3EEF9;
  --st-interview: #0B6E67;              --st-interview-tint: #E0F3F0;
  --st-offer: var(--success);           --st-offer-tint: var(--success-tint);
  --st-rejected: var(--ink-3);          --st-rejected-tint: var(--surface-2);

  /* Match-Stufen (§2.5, W9): Füllung des Match-Balkens und die Zahl darauf.
     0 bis 19 rot, 20 bis 49 gelb, ab 50 vier Grünstufen, die sich bis 100
     zum dunklen Smaragd verdichten. Eigene Rollen statt --danger/--warn: der
     Match ist keine Warnung (§2.5). Jede Zahl ≥ 4,5 : 1 auf ihrer Füllung. */
  --match-poor: #F28B82;    --match-poor-ink: #111018;
  --match-fair: #F5C443;    --match-fair-ink: #111018;
  --match-good-1: #9CDFB6;  --match-good-1-ink: #111018;
  --match-good-2: #4DBF85;  --match-good-2-ink: #111018;
  --match-good-3: #0E7A50;  --match-good-3-ink: #FFFFFF;
  --match-good-4: #065539;  --match-good-4-ink: #FFFFFF;

  /* ── 2.6 Hülle (in beiden Modi dunkel) ───────────────────────────────────── */
  --chrome-bg: #14131C;
  --chrome-ink: #EDECF4;
  --chrome-ink-2: #A9A8BC;
  --chrome-line: #24232F;
  --chrome-hover: #22212D;
  --chrome-avatar-bg: #2B2A38;
  --chrome-avatar-ink: #D7D6E4;
  --brand-tile-bg: var(--accent);
  --brand-tile-ink: #FFFFFF;
  --brand-word-accent: #A99FFA;
  /* Hüllen-Literale aus §4.1 und §4.2, damit sie nicht im Komponenten-CSS
     stehen müssen: Rand des Sekundärknopfs auf der Hülle, gewählter Eintrag
     der Hauptnavigation, Icon des gewählten Reiters der Tab-Leiste. */
  --chrome-btn-line: #34334A;
  --chrome-sel-bg: #EDECF4;
  --chrome-sel-ink: #14131C;
  --tabbar-sel-ico: #B6ADFB;

  /* ── 2.8 Elevation (eine Lichtrichtung, Tönung aus der Tinte) ─────────────── */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(17,16,24,.03), 0 1px 3px rgba(17,16,24,.08);
  --elev-2: 0 2px 4px rgba(17,16,24,.05), 0 10px 24px -6px rgba(17,16,24,.14);
  --elev-3: 0 4px 10px rgba(17,16,24,.08), 0 24px 56px -12px rgba(17,16,24,.34);
  /* Der Ausschnitt der Tour: ein Ring in --scrim um das hervorgehobene
     Element, keine Elevation. Mit Akzentkante, sobald er steht. */
  --tour-cutout: 0 0 0 9999px var(--scrim);
  --tour-cutout-ring: 0 0 0 9999px var(--scrim), 0 0 0 2px var(--accent);

  /* ── 2.9 Fokus ───────────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --focus-ring-input: 0 0 0 3px var(--accent-tint-2);

  /* ── 2.11 Komponenten-Rollen (Werte laut mockups/src/c.css) ──────────────── */
  --btn-r: var(--r-md);
  --input-r: var(--r-md);
  --card-r: var(--r-lg);
  --badge-r: var(--r-sm);
  --tag-r: var(--r-sm);
  --msg-r: var(--r-lg);
  --suggestion-r: var(--r-full);

  --panel-bg: var(--surface);
  --panel-line: var(--line);
  --input-bg: var(--surface);
  --input-line: var(--line-strong);

  --tag-bg: var(--accent-tint);
  --tag-ink: var(--accent-ink);
  --count-bg: var(--surface-3);
  --count-ink: var(--ink-2);

  --btn-primary-bg: var(--accent);
  --btn-primary-hover: var(--accent-hover);
  --btn-primary-shadow: 0 1px 2px rgba(17,16,24,.2), inset 0 1px 0 rgba(255,255,255,.16);
  --btn-secondary-bg: var(--surface);
  --btn-secondary-line: var(--line-strong);
  --btn-secondary-shadow: var(--elev-1);

  --notice-bg: var(--surface);
  --notice-line: var(--line);

  --card-bg: var(--surface);
  --card-line: var(--line);
  --card-line-hover: var(--accent-tint-2);
  --card-shadow: var(--elev-1);
  --card-shadow-hover: var(--elev-2);

  --badge-bg: var(--surface-2);
  --badge-line: var(--line);

  --match-track: var(--surface-3);
  /* Die einzige erlaubte Mischung (DESIGN §2.1): sie steht im Token selbst. */
  --match-fill: color-mix(in srgb, var(--accent) 72%, var(--surface));
  --match-fill-strong: var(--accent);

  --contextbar-bg: var(--surface);
  --canvas-bg: var(--bg);
  --toolbar-bg: var(--surface);
  --sheet-shadow: var(--elev-2);
  --side-bg: var(--surface);

  --rail-bg: var(--chrome-bg);
  --rail-line: var(--chrome-line);
  --rail-ink: var(--chrome-ink-2);
  --rail-ink-strong: var(--chrome-ink);
  --rail-hover: var(--chrome-hover);

  --msg-ai-bg: var(--surface);
  --msg-ai-line: var(--line);
  --msg-me-bg: var(--chrome-bg);
  --msg-me-ink: var(--chrome-ink);

  /* Der Toast ist in beiden Modi invertiert. */
  --toast-bg: #14131C;
  --toast-ink: #EDECF4;
  --toast-accent: #B6ADFB;
}

/* Mobil (≤ 760 px, die einzige inhaltliche Umbruchkante): schmaler Außenrand. */
@media (max-width: 760px) {
  :root { --gutter: var(--s4); }
}

/* Jobsuche unter 1180 px (DESIGN §3.3): das Suchpanel wird schmaler. */
@media (max-width: 1180px) {
  :root { --searchpanel-w: 280px; }
}

/* ═══ Dunkel ════════════════════════════════════════════════════════════════
   Nur, was sich gegenüber Hell ändert. Rollen, die auf Grundwerte zeigen,
   folgen von selbst. Papier, Papiertinte und Absatz-Hover bleiben hell, weil
   das Blatt das Druckbild ist. */
html[data-theme="dark"] {
  --bg: #0F0E15;
  --surface: #16151E;
  --surface-2: #1D1C27;
  --surface-3: #282735;
  --surface-raised: #1B1A24;
  --line: #262533;
  --line-strong: #363545;
  --ink: #ECEBF3;
  --ink-2: #BEBDCC;
  --ink-3: #8F8EA2;
  --accent: #6A5CEB;
  --accent-hover: #7A6DF0;
  --accent-ink: #AEA5FB;
  --accent-tint: #1F1B3C;
  --accent-tint-2: #2C2656;
  --on-accent: #FFFFFF;
  --hover-bg: #1F1E29;
  --scrim: rgba(0,0,0,.62);
  --ai-edge: linear-gradient(90deg, #7163F0, #C2B9FF 50%, #7163F0);

  --success: #58CB8B;  --success-tint: #10251A;
  --warn: #E7B04F;     --warn-tint: #251D0E;  --warn-line: #463518;
  --danger: #F27E73;   --danger-tint: #2C1513;
  --on-danger: #111018;

  --st-applied: #86B6EA;    --st-applied-tint: #10213A;
  --st-interview: #58CAB9;  --st-interview-tint: #0E2826;

  --match-poor: #E0675D;    --match-poor-ink: #111018;
  --match-fair: #DDB03E;    --match-fair-ink: #111018;
  --match-good-1: #8BD9AC;  --match-good-1-ink: #111018;
  --match-good-2: #3DAF78;  --match-good-2-ink: #111018;
  --match-good-3: #106B46;  --match-good-3-ink: #ECEBF3;
  --match-good-4: #0A5238;  --match-good-4-ink: #ECEBF3;

  --chrome-bg: #09080E;
  --chrome-line: #1C1B26;
  --chrome-hover: #1A1924;

  /* Im Dunkeln trägt eine Innenlicht-Kante oben den Rand, wo Schatten
     verschwinden (Raycast-Prinzip). */
  --elev-1: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px -6px rgba(0,0,0,.6);
  --elev-3: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.04), 0 28px 60px -12px rgba(0,0,0,.8);

  --btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  --btn-secondary-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  --msg-me-bg: #2C2656;
  --msg-me-ink: var(--ink);

  --toast-bg: #ECEBF3;
  --toast-ink: #111018;
  --toast-accent: #4A3BCB;
}

/* ── 2.10 Pflichtregel: reduzierte Bewegung ─────────────────────────────────
   Alle Animationen und Übergänge laufen auf 1 ms (Regel aus mockups/src/base.css). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}