/* ============================================================
   Puls – Design-Tokens nach der CI von Rafaela Fleischer
   Quelle: ~/projekte/standards/design.md, Teil 3 (Farben), 4 (Schrift),
   5 (Formensprache), 13 (Tokens). CI-Werte nur hier, nie fest im Code.

   Die Bühne ist dunkel: Petrol-Tief als Grund, Petrol als Fläche darauf,
   Gelb als einziges Signal (immer voll und satt, nie durchscheinend),
   Magenta als sparsamer Farbtupfer. Text auf Dunkel in Weiß 100/85/70 %.
   Kontraste auf Petrol-Tief (#002E2D): Weiß 14,7:1 · Gelb 10,4:1 ·
   Helles Petrol 8:1 · Weiß 85 % ≈ 10:1 · Weiß 70 % ≈ 6,9:1.
   Magenta erreicht dort nur 2,3:1 – deshalb nie als Text, nur als Fläche
   mit weißer Schrift (6,5:1).
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Marke (design.md Teil 3 – diese Werte, keine ähnlichen) ---- */
  --petrol:      #005959;
  --petrol-hell: #A8C4C3;
  --gelb:        #F2DA00;
  --gelb-zart:   #FFF9C4;   /* nur als helle Fläche, nie als Akzent */
  --magenta:     #B21573;
  --weiss:       #FFFFFF;
  --petrol-tief: #002E2D;   /* tiefster Grund */

  --white: var(--weiss);
  --black: var(--petrol-tief);   /* „Schwarz“ der Oberfläche ist Petrol-Tief */
  --on-accent: var(--petrol-tief);  /* Text auf Gelb */

  /* ---- Flächen-Treppe auf Dunkel ---- */
  --bg-0: #001F1E;
  --bg-1: var(--petrol-tief);
  --bg-2: var(--petrol-tief);
  --bg-3: #0A3D3C;
  --bg-4: #124847;

  /* ---- Text auf Dunkel (design.md: 100 / 85 / 70 %) ---- */
  --text-100: #FFFFFF;
  --text-200: rgba(255,255,255,.92);
  --text-300: rgba(255,255,255,.85);
  --text-400: rgba(255,255,255,.70);
  --text-500: rgba(255,255,255,.70);
  --text-600: rgba(255,255,255,.55);   /* nur Deko, nie für lesbaren Text */

  /* ---- Rahmen ---- */
  --border-subtle: rgba(255,255,255,.08);
  --border-soft:   rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.24);
  --border-active: var(--gelb);
  --focus-ring:    var(--gelb);   /* Fokus auf Petrol: Gelb (design.md Teil 6) */

  /* ---- Status (funktional, keine Markenfarben – design.md Teil 3) ---- */
  --status-green:  #00E676;
  --status-yellow: #FFF200;   /* Warnung, immer mit „!“ */
  --status-red:    #FF1744;   /* auf Petrol nur als Fläche mit schwarzer Schrift */

  --signal-text: var(--gelb);
  --ok-text:     var(--status-green);
  --warn-text:   var(--status-yellow);
  --alert-text:  var(--text-100);

  /* Kein Farbverlauf in Schrift – Hervorhebung ist sattes Gelb */
  --grad-headline: linear-gradient(var(--gelb), var(--gelb));

  /* ---- Abstände ---- */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;

  /* ---- Radien: kantig (design.md Teil 5) – Knöpfe, Karten, Felder nur --r-sm,
     --r-pill nur für runde Kleinteile wie Status-Punkte ---- */
  --r-xs: 3px; --r-sm: 3px; --r-md: 3px; --r-lg: 3px; --r-xl: 3px;
  --r-pill: 999px;

  /* ---- Schatten ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.55), 0 12px 28px -8px rgba(0,0,0,.35);

  /* ---- Schrift: nur Montserrat und The Breakdown (design.md Teil 4) ---- */
  --font:         'Montserrat', Arial, sans-serif;
  --font-display: 'Montserrat', Arial, sans-serif;
  --font-hand:    'The Breakdown', cursive;   /* nur kurze Überschriften, nie Rafaelas Name */
  --mono:         var(--font);                /* Zahlen und Labels: Montserrat mit tabular-nums */

  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 20px;
  --fs-xl: 24px;  --fs-2xl: 32px; --fs-3xl: 40px;

  /* ---- Bewegung (dezent) ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .4s;

  /* ---- KI-Denk-Indikator ---- */
  --think-pulse:   1.15s;
  --think-stagger: .16s;
  --think-cycle:   1.5s;
  --think-word-in: .3s;

  /* ---- Layout ---- */
  --container: 1200px;
  --reading: 900px;
}