/* Design-Tokens Weinstein Cockpit — Spezifikation §12, Grundlage der weinstein-design-Skill.
   Einzige Stelle mit Hex-Werten. Komponenten-CSS referenziert ausschliesslich var(--...). */

:root {
  /* --- Ebene 1: Fundament (Grau traegt) --- */
  --grau-0: #ffffff;
  --grau-50: #f7f7f6;
  --grau-100: #f0efed;
  --grau-200: #e2e0dd;
  --grau-300: #cbc8c3;
  --grau-400: #a3a19b;
  --grau-500: #7a7873;
  --grau-600: #5c5a56;
  --grau-700: #414039;
  --grau-800: #2a2925;
  --grau-900: #1a1917;

  --bg: var(--grau-50);
  --flaeche: var(--grau-0);
  --flaeche-erhoben: var(--grau-0);
  --text: var(--grau-900);
  --text-schwach: var(--grau-600);
  --rahmen: var(--grau-200);
  --rahmen-stark: var(--grau-300);

  /* --- Ebene 2: Status (nur Ampel, nie dekorativ) --- */
  --ampel-gruen: #2e8b3d;
  --ampel-gruen-flaeche: #e6f4e8;
  --ampel-orange: #a3560d;
  --ampel-orange-flaeche: #fbeddc;
  --ampel-rot: #c62828;
  --ampel-rot-flaeche: #fbe2e1;
  --ampel-grau: #8a8a8a;
  --ampel-grau-flaeche: #eeeeec;

  /* --- Ebene 3: Modul-Akzente --- */
  --akzent-cockpit: #00407b;
  --akzent-cockpit-hell: #e8eff6;
  --akzent-akquise: #eb5b1b;
  --akzent-lernen: #5b4f9c;
  --akzent-briefing: #009cb5;
  --akzent-archiv: #022b2a;

  /* F1 nutzt ausschliesslich den Cockpit-Akzent */
  --akzent: var(--akzent-cockpit);
  --akzent-hell: var(--akzent-cockpit-hell);
  --akzent-text-auf-akzent: #ffffff;

  --fokus-ring: #1a6fd1;
  --text-invers: #ffffff; /* z.B. Text auf der Ampel-Badge - bleibt in beiden Themes weiss */

  /* --- Typografie --- */
  --font-sans: 'Jost', system-ui, sans-serif;
  --fs-body: 15px;
  --fs-heading: 19px;
  --fs-page-title: 24px;
  --fs-small: 13px;

  /* --- Abstand / Radius / Bewegung --- */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --schatten-karte: 0 1px 2px rgba(26, 25, 23, 0.06), 0 1px 6px rgba(26, 25, 23, 0.05);
  --dauer-kurz: 120ms;

  color-scheme: light;
}

/* Dunkles Theme: Grauwerte invertiert, Koenigsblau fuer dunklen Grund aufgehellt,
   Ampelfarben separat kontrastgeprueft statt 1:1 uebernommen. */
:root[data-theme='dunkel'] {
  --bg: var(--grau-900);
  --flaeche: var(--grau-800);
  --flaeche-erhoben: #322f2a;
  --text: var(--grau-50);
  --text-schwach: var(--grau-400);
  --rahmen: var(--grau-700);
  --rahmen-stark: var(--grau-600);

  --ampel-gruen: #5fc274;
  --ampel-gruen-flaeche: #1c3a22;
  --ampel-orange: #eaa15a;
  --ampel-orange-flaeche: #43300f;
  --ampel-rot: #f08b85;
  --ampel-rot-flaeche: #452221;
  --ampel-grau: #a3a19b;
  --ampel-grau-flaeche: #38362f;

  --akzent-cockpit: #5f96d6;
  --akzent-cockpit-hell: #132743;
  --akzent: var(--akzent-cockpit);
  --akzent-hell: var(--akzent-cockpit-hell);
  --akzent-text-auf-akzent: #0b1622;

  --fokus-ring: #7fb2ef;
  --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 8px rgba(0, 0, 0, 0.3);

  color-scheme: dark;
}

/* Default: Systemeinstellung folgen, solange kein data-theme gesetzt ist
   (Nutzerwahl in app.js setzt data-theme explizit und gewinnt). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']):not([data-theme='dunkel']) {
    --bg: var(--grau-900);
    --flaeche: var(--grau-800);
    --flaeche-erhoben: #322f2a;
    --text: var(--grau-50);
    --text-schwach: var(--grau-400);
    --rahmen: var(--grau-700);
    --rahmen-stark: var(--grau-600);

    --ampel-gruen: #5fc274;
    --ampel-gruen-flaeche: #1c3a22;
    --ampel-orange: #eaa15a;
    --ampel-orange-flaeche: #43300f;
    --ampel-rot: #f08b85;
    --ampel-rot-flaeche: #452221;
    --ampel-grau: #a3a19b;
    --ampel-grau-flaeche: #38362f;

    --akzent-cockpit: #5f96d6;
    --akzent-cockpit-hell: #132743;
    --akzent: var(--akzent-cockpit);
    --akzent-hell: var(--akzent-cockpit-hell);
    --akzent-text-auf-akzent: #0b1622;

    --fokus-ring: #7fb2ef;
    color-scheme: dark;
  }
}