/* ============================================================
   tokens.css — Marken-Schicht des Anleitungs-Funnels
   Analog zu video/tokens.css: DIE Personalisierungs-Datei.
   Geometrie/Komponenten leben in base.css und bleiben stabil.

   RAMZI-REGEL (2026-07-12, verbindlich): Das Designsystem ist
   MONOCHROM wie die Video-Leinwände (Galerie /leinwaende/) —
   kein Terracotta, kein Gold als Emphase. Betonte Wörter und
   Keywords bekommen die INVERTIERUNGS-PILL (helle gerundete Box
   mit dunklem Text; auf hellen Flächen invertiert), NIEMALS
   Anführungszeichen.
   ============================================================ */

:root {
  /* --- Bühne (Video-Dunkelwelt, Near-Black) --- */
  --bg:        #0A0A0B;   /* Grundfläche — wirklich schwarz, minimal warm */
  --bg-raise:  #141416;   /* angehobene Karten auf der Bühne */
  --bg-deep:   #050506;   /* Prompt-/Terminal-Blöcke: eine Stufe tiefer */
  --line:      rgba(244, 239, 232, 0.14);  /* Haarlinien auf Dunkel */
  --line-soft: rgba(244, 239, 232, 0.08);

  /* --- Tinte auf Dunkel (warmes Off-White, nie reinweiß) --- */
  --ink:       #F4EFE8;
  --ink-dim:   #BDB6AA;
  --ink-faint: #948D7D;   /* ≥5:1 auf --bg (WCAG AA, Kritik-Fix) */

  /* --- Papier (die hellen Beweis-Momente = Video-Hellszenen) --- */
  --paper:     #F4EFE8;
  --paper-ink: #141215;
  --paper-dim: #5D574E;
  --paper-line: rgba(20, 18, 21, 0.12);

  /* --- Invertierungs-Pill (DAS Emphase-Widget der Videos) ---
         Auf dunkler Bühne: helle Pill, dunkler Text.
         Paper-Karten (.proof/.success) drehen die Polarität um. */
  --pill-bg:  #F4EFE8;
  --pill-ink: #141215;

  /* --- Zwei-Stimmen-Typografie (stil-spec §A2) ---
         Stimme A: fette Grotesk (Helvetica Neue nativ auf Apple,
         Arimo = metrischer freier Ersatz auf Android/Windows).
         Stimme B: Bodoni-Italic (Bodoni Moda ≙ Bodoni 72). */
  --font-a: "Helvetica Neue", "Arimo", Helvetica, Arial, sans-serif;
  --font-b: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Radius-System (an Video-Karten angelehnt) --- */
  --r-card: 20px;
  --r-chip: 999px;
  --r-block: 14px;
  --r-pill: 0.32em;       /* Wort-Pill: gerundetes Rechteck wie im Video */

  /* --- Rhythmus --- */
  --gap-section: clamp(3.5rem, 10vw, 5.5rem);
  --pad-x: clamp(1.25rem, 5vw, 2rem);
  --measure: 42rem;

  /* --- Motion (dosiert, G-06-artig) --- */
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --t-fast: 160ms;
  --t-rise: 420ms;
}