/* ─────────────────────────────────────────────────────────────────────────
   biodanza-cockpit — css/tokens.css

   Geschichtserzaehlung: Das Farb- und Mass-Woerterbuch der App. Anton hat in
   seiner Mail "farben" ein komplettes Design-System mitgeschickt (D6-D11):
   Sand, Weiss und Petrol am Tag, tiefe Grautoene fuer den Ruhigen Modus. Diese
   Datei uebersetzt es in CSS Custom Properties in zwei Schichten:

     1. D6-Rohwerte  (--bg-light, --primary ...)  — exakt aus der Mail
     2. Semantische Tokens (--color-text, --color-primary ...) — das, was
        Komponenten und Module benutzen; sie wechseln je Theme den Wert.

   Module schreiben NIE Hex-Werte, sondern immer var(--color-...), sonst
   bleiben sie im Dunkel- und Ruhig-Modus hell stehen.

   Themes haengen am <html>-Element:
     html[data-theme="light"|"dark"]  — D2 Dunkelmodus
     html[data-quiet="true"]          — D3 Ruhiger Modus (schlaegt das Theme)
   Gesetzt werden sie von core/settings.js (applySettings, core-A) und vor
   dem ersten Malen von einem kleinen Inline-Skript in index.html (gegen
   Hell-Blitz im dunklen Workshop-Raum). ui/shell.js liest daraus nur die
   TopBar-Farbe fuer die Statusleiste.

   ── DECISION — Systemvorgabe (prefers-color-scheme) in JS aufloesen vs.
      Media-Query-Block in CSS ──
     Gewaehlt: data-theme ist IMMER gesetzt; solange der Nutzer nichts
     gewaehlt hat, uebernimmt core/settings.js (deviceDefaults) die
     Systemvorgabe als Startwert fuer darkMode. vs. zusaetzlicher
     @media (prefers-color-scheme: dark)-Block mit Kopie aller Dunkel-Tokens.
     Grund: Eine einzige Quelle fuer die Dunkel-Werte — zwei identisch zu
     haltende Bloecke driften beim ersten Nachschaerfen auseinander. Die
     Systemvorgabe ist laut Auftrag nur Startwert.

   ── DECISION — Sekundaertext #6F6F6F statt #777777 (D6) ──
     Gemessen (logs/tmp/contrast.mjs, WCAG-2-Formel): #777777 erreicht auf
     bgLight #F7F3ED nur 4.05:1, auf Weiss 4.48:1 — beides unter AA 4.5:1.
     #6F6F6F ist die kleinste Abdunklung, die besteht: 4.55:1 auf Sand,
     5.02:1 auf Weiss (#707070 faellt mit 4.48 noch durch). Regel daraus:
     Sekundaertext nur auf --color-bg / --color-surface, nie auf getoenten
     Flaechen (--color-surface-muted) — dort normale Textfarbe nehmen.

   ── DECISION — D11-UI-Werte bleiben exakt (#CCCCCC, #AAAAAA, #A3B9C9) ──
     vs. Abdunkeln auf 3:1 (WCAG 1.4.11 Nicht-Text-Kontrast).
     Gemessen: Eingabe-Rahmen #CCCCCC 1.61:1, Toggle-aus #AAAAAA 2.32:1,
     Progress #1F6F8B auf #A3B9C9 2.79:1. Grund: Die Spezifikation nennt
     sie "exakt"; die Erkennbarkeit tragen andere Merkmale (sichtbares Label
     ueber jedem Feld, weisse Feldflaeche, Knopf-Position beim Toggle,
     Fokus-Ring #1F6F8B). Kandidat fuer Antons Rueckmeldung — siehe Bericht.
   ───────────────────────────────────────────────────────────────────────── */


/* ── D6 Rohwerte ──
      Exakt aus der Mail; einzige Abweichung: --text-secondary (siehe oben). */
:root {
  --bg-light: #F7F3ED;
  --bg-dark: #121212;
  --surface-light: #FFFFFF;
  --surface-dark: #1E1E1E;
  --primary: #1F6F8B;
  --secondary: #A3B9C9;
  --favorite: #F1C40F;
  --success: #27AE60;
  --warning: #C0392B;
  --text-light: #222222;
  --text-dark: #F5F5F5;
  --text-secondary: #6F6F6F;
  --text-secondary-spec: #777777;   /* Original D6, nur zur Dokumentation */

  /* D9/D11-Einzelwerte */
  --disabled: #CCCCCC;
  --input-border: #CCCCCC;
  --toggle-inactive: #AAAAAA;
}


/* ── Masse: Abstaende, Radien, Typografie (D6-D8) ──
      Theme-unabhaengig; nur der Ruhige Modus vergroessert Touch-Masse. */
:root {
  /* D6 spacing [4, 8, 12, 16, 24] */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* D6 radius small/medium/large + D11 Progress-Radius */
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-progress: 4px;
  --radius-pill: 999px;

  /* D7 Typografie — Systemschrift laut Vertrags-DECISION (Roboto auf
     Android, San Francisco auf iOS, Inter falls installiert) */
  --font-family: Inter, system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
  --font-size-title: 28px;
  --font-size-subtitle: 20px;
  --font-size-body: 16px;
  --font-size-button: 16px;
  --font-size-small: 14px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-body: 1.5;

  /* D7 "grosse Schrift im Session-Flow" — vom Session-Modul zu benutzen */
  --font-size-session-title: 30px;
  --font-size-session-body: 18px;
  --font-size-session-timer: 44px;

  /* D8 Layout */
  --screen-pad: 16px;             /* Aussenabstand Screen */
  --gap: 12px;                    /* zwischen Komponenten (12-16) */
  --gap-l: 16px;
  --card-pad: 16px;               /* Card innen */
  --card-gap: 8px;                /* Card aussen */
  --btn-pad-x: 12px;              /* Button innen horizontal */
  --btn-pad-y: 8px;               /* Button innen vertikal */
  --input-pad: 12px;              /* D11 Innenabstand */

  /* D9 Buttons 44-48 px, Touch-Ziele >= 44 px (Vertrag Abschnitt 8) */
  --touch-min: 44px;
  --btn-h-sm: 44px;
  --btn-h-md: 48px;
  --btn-h-lg: 56px;
  --icon-size: 24px;
  --icon-size-btn: 20px;
  --input-h: 48px;

  /* Shell */
  --content-max: 800px;           /* Tablet: Breite nutzen, aber lesbar bleiben */
  --topbar-h: 56px;
  --bottomnav-h: 64px;

  /* Schichten */
  --z-bars: 20;
  --z-modal: 100;
  --z-toast: 200;

  /* Bewegung — kurz und ruhig; reduziert bei prefers-reduced-motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* ── Theme Hell (D12, Standard) ──
      Warmer Sand-Hintergrund, weisse Flaechen, Petrol fuer Aktionen. */
:root {
  color-scheme: light;

  --color-bg: var(--bg-light);
  --color-surface: var(--surface-light);
  --color-surface-muted: #E3EAEF;          /* Tonung der Sekundaerfarbe (Chips, Tags) */
  --color-text: var(--text-light);
  --color-text-secondary: var(--text-secondary);
  --color-divider: rgba(34, 34, 34, 0.10);
  --color-border: var(--input-border);

  --color-primary: var(--primary);         /* Flaeche: Primaer-Button, Toggle, Fortschritt */
  --color-on-primary: #FFFFFF;             /* 5.67:1 */
  --color-primary-text: var(--primary);    /* Petrol als Schrift: 5.13 auf Sand, 5.67 auf Weiss */
  --color-primary-soft: rgba(31, 111, 139, 0.12);
  --color-secondary: var(--secondary);
  --color-on-secondary: var(--text-light); /* 7.83:1 */

  --color-favorite: var(--favorite);
  --color-favorite-stroke: #A07F08;        /* dunkle Kontur macht den gelben Stern auf Weiss sichtbar */
  --color-success: var(--success);
  --color-success-text: #1E7E46;           /* #27AE60 als Schrift nur 2.87:1 → 4.60 auf Sand */
  --color-danger: var(--warning);
  --color-on-danger: #FFFFFF;              /* 5.44:1 */
  --color-danger-text: var(--warning);     /* 4.92 auf Sand */
  --color-warning-soft: rgba(176, 116, 0, 0.14);   /* Hinweis-Abzeichen ("bitte prüfen", "Datei fehlt") */
  --color-warning-text: #8A5A00;           /* 5.9:1 auf Weiss, >= 4.8 auf der Tonung */

  --color-focus: var(--primary);
  --color-disabled-bg: var(--disabled);
  --color-disabled-text: #6F6F6F;
  --color-toggle-on: var(--primary);
  --color-toggle-off: var(--toggle-inactive);
  --color-toggle-knob: #FFFFFF;
  --color-progress-track: var(--secondary);
  --color-progress-fill: var(--primary);
  --color-slider-track: var(--color-progress-track);   /* Hell: D11 exakt (siehe DECISION oben) */
  --color-slider-thumb: var(--color-primary);

  --color-topbar-bg: var(--primary);       /* Petrol-TopBar; Android-Statusleiste folgt (ui/shell.js) */
  --color-topbar-text: #FFFFFF;
  --color-topbar-focus: #FFFFFF;
  --color-nav-bg: var(--surface-light);
  --color-nav-text: var(--text-secondary);
  --color-nav-active: var(--primary);

  --color-inverse-bg: #2B2B2B;             /* Toasts */
  --color-inverse-text: var(--text-dark);
  --color-backdrop: rgba(18, 18, 18, 0.48);

  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1);   /* D10 exakt */
  --shadow-raised: 0 -2px 8px rgba(0, 0, 0, 0.08);
  --shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.18);
}


/* ── Theme Dunkel (D2) ──
      bg #121212, Flaechen #1E1E1E, Text #F5F5F5, Akzente leicht entsaettigt.
      Alle Textpaare >= 4.5:1 (gemessen, logs/tmp/contrast.mjs).

   ── DECISION — Petrol im Dunkeln zweigeteilt (Flaeche vs. Schrift) ──
     Gewaehlt: Flaeche #2F6E83 (hsl 195/47%/35%, entsaettigt) mit hellem
     Text 5.24:1; Petrol als Schrift/Icon #7DB2C5 (7.18:1 auf #1E1E1E).
     vs. ein einziges Petrol #1F6F8B — als Schrift auf #1E1E1E nur 2.94:1.
     Grund: Ein Ton kann nicht gleichzeitig dunkle Button-Flaeche UND
     lesbare Schrift auf Dunkelgrau sein; helle Buttons waeren im dunklen
     Raum zu grell. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--bg-dark);
  --color-surface: var(--surface-dark);
  --color-surface-muted: #2A3136;
  --color-text: var(--text-dark);
  --color-text-secondary: #A6A6A6;         /* 6.85 auf #1E1E1E (#777777 nur 3.72) */
  --color-divider: rgba(245, 245, 245, 0.10);
  --color-border: #555555;

  --color-primary: #2F6E83;
  --color-on-primary: var(--text-dark);
  --color-primary-text: #7DB2C5;
  --color-primary-soft: rgba(125, 178, 197, 0.16);
  --color-secondary: #4A5B66;
  --color-on-secondary: var(--text-dark);

  --color-favorite: #E0BE3E;
  --color-favorite-stroke: #E0BE3E;
  --color-success: #4CAF7A;
  --color-success-text: #5DBB86;
  --color-danger: #A8443A;
  --color-on-danger: var(--text-dark);
  --color-danger-text: #EF8A80;
  --color-warning-soft: rgba(230, 184, 92, 0.16);
  --color-warning-text: #E6B85C;           /* ~9:1 auf #1E1E1E */

  --color-focus: #7DB2C5;
  --color-disabled-bg: #3A3A3A;
  --color-disabled-text: #8C8C8C;
  --color-toggle-on: #4A8DA4;
  --color-toggle-off: #6B6B6B;
  --color-toggle-knob: #F5F5F5;
  --color-progress-track: #3A4852;
  --color-progress-fill: #7DB2C5;
  /* ── DECISION — Regler (Slider) mit eigenen Tokens statt der Progress-Farben ──
       vs. (bis 2026-10-08) Spur = --color-progress-track, Daumen = --color-primary.
       Gemessen (Review core-E, review-sec-slider.mjs, WCAG 1.4.11 >= 3:1):
       Spur/Flaeche 1.77, Daumen/Flaeche 2.92 — im dunklen Raum kaum zu
       finden. Jetzt Spur #6B6B6B (3.13 zu #1E1E1E), Daumen #7DB2C5 (7.18) mit
       Ring in Flaechenfarbe (Ring/Spur 3.13). Die Progress-Farben bleiben:
       Beim Fortschrittsbalken IST Fuellung gegen Spur die Information (4.06). */
  --color-slider-track: var(--color-toggle-off);
  --color-slider-thumb: var(--color-progress-fill);

  --color-topbar-bg: var(--surface-dark);
  --color-topbar-text: var(--text-dark);
  --color-topbar-focus: #7DB2C5;
  --color-nav-bg: var(--surface-dark);
  --color-nav-text: #A6A6A6;
  --color-nav-active: #7DB2C5;

  --color-inverse-bg: #E6E6E6;
  --color-inverse-text: var(--surface-dark);
  --color-backdrop: rgba(0, 0, 0, 0.6);

  --shadow-card: 0 0 0 1px rgba(245, 245, 245, 0.06);   /* Schatten sind im Dunkeln unsichtbar */
  --shadow-raised: 0 0 0 1px rgba(245, 245, 245, 0.06);
  --shadow-sheet: 0 -1px 0 rgba(245, 245, 245, 0.08);
}


/* ── Ruhiger Modus (D3) ──
      Fuer die laufende Session im abgedunkelten Raum: sehr dunkel, Text
      gedimmt statt reinweiss, gedaempfte Akzente, groessere Tasten und
      groessere Session-Schrift. Schlaegt das Theme (steht absichtlich NACH
      dem Dunkel-Block — gleiche Spezifitaet, spaeter gewinnt).

   ── DECISION — Text #B8B8B8 statt #F5F5F5 im Ruhigen Modus ──
     vs. dieselbe Textfarbe wie im Dunkelmodus.
     Grund: D3 verlangt "gedimmt"; #B8B8B8 strahlt weniger und haelt
     trotzdem 9.12:1 auf der Flaeche. Sekundaertext #858585 haelt 4.90:1
     auf #161616 — wie im Hellen nur auf bg/surface verwenden.

   ── DECISION — Touch-Masse +8..12 px statt nur Farben dimmen ──
     Grund: D3 "grosse gedaempfte Buttons" — im Halbdunkel und in Bewegung
     trifft der Finger groessere Ziele sicherer (Vertrag Abschnitt 8). */
:root[data-quiet="true"] {
  color-scheme: dark;

  --color-bg: #0A0A0A;
  --color-surface: #161616;
  --color-surface-muted: #202426;
  --color-text: #B8B8B8;
  --color-text-secondary: #858585;
  --color-divider: rgba(184, 184, 184, 0.10);
  --color-border: #444444;

  --color-primary: #2A5563;
  --color-on-primary: #DADADA;             /* 5.83:1 */
  --color-primary-text: #6E9DAD;           /* 6.11 auf #161616 */
  --color-primary-soft: rgba(110, 157, 173, 0.14);
  --color-secondary: #33414A;
  --color-on-secondary: #C8C8C8;

  --color-favorite: #B8962E;
  --color-favorite-stroke: #B8962E;
  --color-success: #4E8F69;
  --color-success-text: #5E9E78;
  --color-danger: #7A2E27;
  --color-on-danger: #DADADA;
  --color-danger-text: #D9776D;
  --color-warning-soft: rgba(201, 162, 90, 0.14);
  --color-warning-text: #C9A25A;           /* gedimmt, >= 6:1 auf der Ruhig-Flaeche */

  --color-focus: #6E9DAD;
  --color-disabled-bg: #262626;
  --color-disabled-text: #707070;
  --color-toggle-on: #3E6B7A;
  --color-toggle-off: #666666;             /* #555555 haette nur 2.43:1 */
  --color-toggle-knob: #C8C8C8;
  --color-progress-track: #2C3A42;
  --color-progress-fill: #6E9DAD;
  /* Regler wie im Dunkeln (DECISION dort): Spur #666666 3.15, Daumen 6.11
     zu #161616 — vorher 1.54 bzw. 2.22 */
  --color-slider-track: var(--color-toggle-off);
  --color-slider-thumb: var(--color-progress-fill);

  --color-topbar-bg: #0A0A0A;
  --color-topbar-text: #B8B8B8;
  --color-topbar-focus: #6E9DAD;
  --color-nav-bg: #101010;
  --color-nav-text: #858585;
  --color-nav-active: #6E9DAD;

  --color-inverse-bg: #2A2A2A;
  --color-inverse-text: #C8C8C8;
  --color-backdrop: rgba(0, 0, 0, 0.7);

  --shadow-card: 0 0 0 1px rgba(184, 184, 184, 0.06);
  --shadow-raised: 0 0 0 1px rgba(184, 184, 184, 0.06);
  --shadow-sheet: 0 -1px 0 rgba(184, 184, 184, 0.08);

  /* groessere Ziele und Session-Schrift */
  --touch-min: 56px;
  --btn-h-sm: 52px;
  --btn-h-md: 60px;
  --btn-h-lg: 68px;
  --icon-size-btn: 24px;
  --input-h: 56px;
  --font-size-session-title: 36px;
  --font-size-session-body: 22px;
  --font-size-session-timer: 56px;
}


/* ── Bewegung reduzieren ──
      prefers-reduced-motion und der Ruhige Modus schalten Animationen ab —
      Ruhe heisst auch: nichts zappelt. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}
:root[data-quiet="true"] {
  --duration-fast: 0ms;
  --duration-base: 0ms;
}