/* Farbsystem personal BewerbungsManager — aus dem Logo abgeleitet.
   ZWEI Akzente mit getrennter Zuständigkeit (Entscheidung 2026-07-31, gespiegelt aus
   der Web App, src/styles/ds/colors.css):
     --accent   (Teal)   Struktur, Navigation, Standard-Primäraktion, Fokusring.
     --accent-2 (Orange) alles KI- und Generativbezogene. Keine Dekoration, keine Warnfarbe.
   Der frühere Satz "Orange ist KEIN zweiter UI-Akzent" ist damit aufgehoben.
   --accent-2 zeigt auf --brand-warm, --on-accent-2 auf die dunkle Tinte --on-warm.
   Beide Themes 100% Parität. Kein Glow: nur --shadow-card / --shadow-pop / --shadow-cut.

   Kontraktregel: zu jeder Fläche gehört ein --on-* Token. Wer eine Fläche setzt, setzt die
   Textfarbe aus dem passenden --on-*. Hart kodierte Hex-Werte in Seiten und Komponenten
   sind der Grund, warum Dark Mode bricht — sie sind hier alle als Token abgebildet. */
:root{
  /* Flächen */
  --bg:#F6FAFA;--surface:#FFFFFF;--surface-2:#EDF4F5;--surface-3:#E2EDEE;
  /* Text, drei Stufen (AA auf --bg und --surface) */
  --text-1:#122A2E;--text-2:#3D5B60;--text-3:#587478;
  /* Linien */
  --line:#D7E4E5;--line-strong:#B9CFD1;
  /* Bedienelement-Spur im Aus-Zustand — 3:1 gegen --surface (WCAG 1.4.11).
     --line-strong erreicht nur 1.6:1 und darf keine Schaltergrenze tragen. */
  --control-off:#728F94;
  /* Leitakzent Teal */
  --accent:#0E7D8F;--accent-strong:#0A606F;--accent-dim:#DCF0F3;--accent-line:#93CBD3;--on-accent:#FFFFFF;
  /* Marken-Sekundärfarbe (illustrativ, Charts, Treppen-Motiv).
     --on-warm ist bewusst dunkle Tinte: Weiß auf --brand-warm erreicht nur 2.9:1. */
  --brand-warm:#E97817;--brand-warm-deep:#8A4406;--brand-warm-dim:#FCEBDA;--on-warm:#2E1502;
  /* Zweiter UI-Akzent: KI. Fläche --accent-2, Tinte --on-accent-2 (Weiß wäre 2.9:1). */
  --accent-2:var(--brand-warm);--on-accent-2:var(--on-warm);
  /* KI-Familie und Pipeline-Status, wertgleich mit der Web App (src/styles/ds/colors.css). */
  --accent-2-strong:#8A4406;--accent-2-dim:#FCEBDA;--accent-2-line:#C25F0C;
  --status-interview:#4B3878;--status-interview-dim:#EFE9F7;--status-absage:#7A2F49;--status-absage-dim:#F6E7EC;
  /* Markenfläche für Hero und Footer. Bleibt in BEIDEN Themes dunkel — sonst kippt
     weißer Text auf einen aufgehellten Akzent. Varianten für den Stimmungswechsel. */
  --field:#0A606F;--field-ink:#122A2E;--field-warm:#8A4406;
  --on-field:#FFFFFF;--on-field-2:#DCF0F3;--on-field-3:#A7DCE4;
  /* Invertierter Solid-Button (Header-CTA). Dreht mit dem Theme, statt weiß zu bleiben. */
  --btn-solid-bg:#122A2E;--btn-solid-fg:#FFFFFF;
  /* Status. --ok war #1B7F4D und erreichte auf --ok-dim nur 4.29:1. */
  --ok:#146B40;--ok-dim:#DFF2E7;--warn:#96610A;--warn-dim:#FAF0DB;
  --danger:#BE3A30;--danger-strong:#9E2E26;--danger-dim:#FBE5E3;--on-danger:#FFFFFF;
  --info:#38618F;--info-dim:#E4ECF6;
  /* Chart-Reihe */
  --chart-1:#1793A6;--chart-2:#F28A17;--chart-3:#38618F;--chart-4:#7A5EA6;--chart-5:#1B7F4D;--chart-6:#B65A08;
  /* Schatten — neutral, kein Akzent-Ton, kein Blur-Glow */
  --shadow-card:0 1px 2px rgba(18,42,46,.05),0 4px 14px rgba(18,42,46,.07);
  --shadow-pop:0 4px 10px rgba(18,42,46,.10),0 16px 40px rgba(18,42,46,.16);
  --shadow-cut:inset 0 1px 2px rgba(18,42,46,.08);
  --shadow-knob:0 1px 2px rgba(18,42,46,.25);
  /* Fokus */
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  --focus-ring-on-surface:0 0 0 2px var(--surface),0 0 0 4px var(--accent);
  --focus-ring-on-field:0 0 0 2px var(--field),0 0 0 4px var(--on-field);
}
[data-theme="dark"]{
  --bg:#0C1B1E;--surface:#122529;--surface-2:#173034;--surface-3:#1D3B40;
  --text-1:#E9F2F3;--text-2:#B0C8CB;--text-3:#84A4A8;
  --line:#224247;--line-strong:#2F565C;
  --control-off:#557F86;
  --accent:#41B7CA;--accent-strong:#7BD0DE;--accent-dim:#123E46;--accent-line:#1F5A64;--on-accent:#06272C;
  --brand-warm:#F49C4A;--brand-warm-deep:#F9BE85;--brand-warm-dim:#3A2812;--on-warm:#2E1502;
  --accent-2:var(--brand-warm);--on-accent-2:var(--on-warm);
  --accent-2-strong:#F9BE85;--accent-2-dim:#3A2812;--accent-2-line:#B4712E;
  --status-interview:#C9B8E8;--status-interview-dim:#2C2440;--status-absage:#E7A8BE;--status-absage-dim:#3A1A24;
  --field:#0E464F;--field-ink:#0C1B1E;--field-warm:#5E2E04;
  --on-field:#FFFFFF;--on-field-2:#DCF0F3;--on-field-3:#A7DCE4;
  --btn-solid-bg:#E9F2F3;--btn-solid-fg:#0C1B1E;
  --ok:#4CC488;--ok-dim:#12352A;--warn:#E4A93E;--warn-dim:#37290E;
  --danger:#F08A80;--danger-strong:#F6ADA5;--danger-dim:#3E1B18;--on-danger:#3E1B18;
  --info:#7FA9DC;--info-dim:#16283E;
  --chart-1:#3FB6C9;--chart-2:#F49C4A;--chart-3:#7FA9DC;--chart-4:#A98FD6;--chart-5:#4CC488;--chart-6:#D98A45;
  --shadow-card:0 1px 2px rgba(0,0,0,.28),0 4px 14px rgba(0,0,0,.30);
  --shadow-pop:0 4px 10px rgba(0,0,0,.36),0 16px 40px rgba(0,0,0,.44);
  --shadow-cut:inset 0 1px 2px rgba(0,0,0,.36);
  --shadow-knob:0 1px 2px rgba(0,0,0,.45);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  --focus-ring-on-surface:0 0 0 2px var(--surface),0 0 0 4px var(--accent);
  --focus-ring-on-field:0 0 0 2px var(--field),0 0 0 4px var(--on-field);
}