/* tokens.css — die Werte, die App und Landing gemeinsam haben.
 *
 * Chronuz hat zwei Oberflächen: die Landingpage (chronuz.io) und die App
 * (my.chronuz.io). Sie waren zwei getrennte Designsysteme mit eigenem
 * Vokabular, eigener Dunkel-Palette, eigenen Radien und Abständen (UI-003).
 * Diese Datei ist der Teilfix: alles, was in beiden GLEICH sein muss, steht
 * hier — mit denselben Namen und denselben Werten wie in
 * `landing/css/tokens.css`. Die Landing bleibt die Referenz; wer dort etwas
 * ändert, ändert es hier mit.
 *
 * Was hier NICHT steht:
 *   - die Neutral- und Signalfarben der App (`--bg`, `--flaeche`, `--warn` …)
 *     — die stehen weiterhin in style.css, sind aber auf die Landing-Palette
 *     gezogen (gleiche Farbtemperatur, siehe Kommentar dort);
 *   - die Schriftfamilien (die App ist ein Werkzeug im System-Stack, die
 *     Landing eine Seite in Source Sans 3) — offen, siehe audit/fixes/w3-e.md;
 *   - die Breakpoints (noch zwei Sätze).
 *
 * Reihenfolge im <head>: tokens.css VOR style.css und motion.css. Beide
 * dürfen Tokens von hier benutzen, keins definiert sie erneut.
 */
:root {
  /* ── Akzent ─────────────────────────────────────────────────────────────
     Das Sanduhr-Grün. Identisch mit --accent/--accent-ink der Landing;
     `--akzent-d` (dunklere Kante für Hover-Ränder) und `--akzent-schein`
     (Glow) gibt es nur in der App. */
  --akzent:        #34e8b0;
  --akzent-d:      #118a67;
  --akzent-text:   #34e8b0;                    /* Akzent ALS TEXT auf --akzent-tint */
  --akzent-tint:   rgba(52, 232, 176, 0.12);   /* = --accent-soft der Landing */
  --akzent-schein: rgba(52, 232, 176, 0.22);
  --auf-akzent:    #06231f;                    /* Text auf gefüllter Akzentfläche, 10.50:1 */

  /* Helle Gegenstücke (Rohwerte; style.css weist sie zu). */
  --h-akzent:        #0b7a5c;                  /* 4.89:1 auf --h-bg */
  --h-akzent-d:      #075e47;
  --h-akzent-text:   #075e47;                  /* 6.28:1 auf --h-akzent-tint */
  --h-akzent-tint:   rgba(11, 122, 92, 0.10);
  --h-akzent-schein: rgba(11, 122, 92, 0.18);
  --h-auf-akzent:    #f3fffa;                  /* 5.19:1 auf --h-akzent */

  /* ── Bewegung ──────────────────────────────────────────────────────────
     Dieselben Dauern und Kurven wie die Landing. Sie standen bisher in
     motion.css; dass sie hier stehen, ändert nichts an der Regel, dass
     motion.css der einzige Ort für Bewegungs-REGELN ist (UI-013). */
  --m-fast: 120ms;
  --m-base: 200ms;
  --m-slow: 320ms;
  --m-zahl: 800ms;                             /* Zahlen hochzählen (nur App) */
  --e-standard:   cubic-bezier(0.2, 0, 0, 1);
  --e-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --e-spring:     cubic-bezier(0.3, 1.25, 0.5, 1);
  /* Die Dauerläufer der Torbühne. Sie sind Deko, keine Rückmeldung, deshalb
     eine eigene Familie — sonst stünden 48s neben 200ms im selben Topf. */
  --m-atem:      5s;                           /* Lichthof, Schweben */
  --m-drift:     48s;                          /* Lichtstrahlen */
  --m-drift-lang: 75s;
  --m-puls:      1.4s;                         /* Welle, Funke, Skelett-Schimmer */
  /* Versatz zwischen zwei Listeneinträgen. Die Landing nennt das
     --m-stagger und nimmt 60ms; in der App sind die Listen länger und die
     Wege kürzer, deshalb ein eigener Name mit eigenem Wert. */
  --m-versatz:   28ms;

  /* ── Form: Radien ──────────────────────────────────────────────────────
     Vier Stufen statt neun. Knöpfe und kleine Marken --r-s, Karten und
     Felderflächen --r-m, Dialoge/Uhr/Torkarte --r-l, alles Pillenförmige
     --r-pill. */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-pill: 999px;

  /* ── Raum: 4px-Basis, identisch mit der Landing ────────────────────── */
  --s-1: 0.25rem;   /* 4 */
  --s-2: 0.5rem;    /* 8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */

  /* ── Schriftgrößen der App ─────────────────────────────────────────────
     Bewusst EIGENE Namen: die App ist ein Werkzeug mit fester 16-px-Basis,
     die Landing eine Seite mit fluider Skala (--fs-body dort 17→18px). Was
     verschieden ist, soll auch verschieden heißen.
     Untergrenze ist 12px — darunter gab es sechs Größen (UI-006). */
  --fs-mikro:  12px;   /* Mono-Labels, Abzeichen, Tabellenköpfe */
  --fs-klein:  13px;   /* Nebentexte, Fußzeilen */
  --fs-mittel: 14px;   /* Listen, Tabellen, Meldungen */
  --fs-gross:  15px;   /* Abschnittsüberschriften, Stempelknöpfe */
  --fs-text:   16px;   /* Fließtext und alle Eingabefelder (iOS zoomt darunter) */
  --fs-anzeige: 22px;  /* die große Zahl auf einer Karte */
  --fs-h1:     clamp(20px, 4vw, 26px);
  /* Zwei Größen bleiben absichtlich außerhalb der Skala: die Wortmarke der
     Torseite (20px) und die der Bühne (26px) sind Schriftzüge, keine Texte;
     die Uhren rechnen ohnehin mit clamp() gegen die Fensterbreite. */

  /* ── Schatten ──────────────────────────────────────────────────────────
     Nur die, die nicht aus dem Akzent-Schein kommen. Der Drawer-Schatten
     hat ein helles Gegenstück, sonst läge im Hellmodus ein 50 % schwarzer
     Schlagschatten neben einem fast weißen Menü (UI-017). */
  --schatten-drawer: 18px 0 48px rgba(0, 0, 0, 0.5);
  --h-schatten-drawer: 18px 0 48px rgba(18, 25, 28, 0.18);
}