/* ============================================================================
   tokens.css — Cosmic Designsystem
   ----------------------------------------------------------------------------
   Reine Wertetabelle. Wird als erstes geladen, damit alle weiteren Dateien
   ausschließlich über var(--…) auf Farben, Radien und Easings zugreifen.

   Quellen:
     - Cosmic-Tokens aus prototype/cosmic.html:18-41
     - Semantische Aliase aus public/style.css:2-18 (bleiben bestehen,
       zeigen jetzt auf die Cosmic-Werte, damit Game-Renderer und
       --game-accent ohne Rename weiter funktionieren)

   H8 (Kontrast): --text-dim wurde von #4A5575 (2,7:1) auf #7A86AD (5,6:1)
   angehoben. Der alte Wert bleibt als --text-decor erhalten und darf nur
   für rein dekorative Zwecke (Trennlinien, Zierrat) verwendet werden.
   ============================================================================ */

:root {
  /* ── Cosmic-Farben (aus cosmic.html:18-41) ─────────────────────────── */
  --bg-space:        #050811;
  --bg-deep:         #0A0E1F;
  --bg-panel:        rgba(15, 20, 40, 0.55);
  --bg-panel-strong: rgba(15, 20, 40, 0.85);

  --nebula-pink:     #FF1B8D;
  --nebula-magenta:  #E879F9;
  --nebula-cyan:     #22D3EE;
  --nebula-blue:     #00BFFF;
  --star-warm:       #FFA07A;
  --star-gold:       #FFD4A3;

  --text-primary:    #F0F4FF;
  --text-secondary:  #8B95B7;
  /* H8: von #4A5575 (2,7:1, fällt durch) auf #7A86AD (5,6:1) angehoben.
     Trägt .tile-meta, .code-label, .sheet-hint — alles Information. */
  --text-dim:        #7A86AD;
  /* Alter Wert, ausschließlich für dekorative Zwecke — nie für Text. */
  --text-decor:      #4A5575;

  /* ── Geometrie ─────────────────────────────────────────────────────── */
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;

  /* ── Easings ───────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Diagramm-Palette (Phase 4) ─────────────────────────────────────
     Eigene kategorische Tokens fuer die Stats-Vektor-Grafiken. Die Cosmic-
     Nebel-Palette oben ist bewusst hell/grell (Hintergrund, Glow) und
     scheitert am dataviz-Validator (Lightness-Band, Blau-Cyan-Delta).
     Diese 5 Slots bestehen alle sechs Checks: Lightness 0.48-0.67, CVD-
     Trennung ΔE >= 11.5, Normal-Vision ΔE >= 21.4. Bei Kategorie-Diagram-
     men pro Reihe fest vergeben, nie zyklisch neu gefaerbt.

     Der Contrast-Warn fuer --chart-4 wird bewusst akzeptiert: das Relief
     liefert die sr-only-Rohwerttabelle, die das Diagramm verlangt.
     Siehe plan/lass-uns-planen-velvety-bunny Phase 4.2. */
  --chart-1:   #DB2777;   /* Rose — Reihe 1, Top-Akzent            */
  --chart-2:   #A855F7;   /* Violet — Reihe 2                      */
  --chart-3:   #0891B2;   /* Cyan 600 — Reihe 3 (Hauptfarbe Charts) */
  --chart-4:   #4F46E5;   /* Indigo — Reihe 4 (Table-Relief noetig) */
  --chart-5:   #EA580C;   /* Orange 600 — Akzent, Spark-Dots       */

  /* ── Semantische Aliase (aus style.css:2-18) ─────────────────────────
     Game-Renderer und --game-accent lesen diese Namen. Ein Umbenennen
     würde vier Spielmodule und deren Tests anfassen, ohne Gewinn. */
  --bg:        var(--bg-space);
  --bg-2:      var(--bg-deep);
  --bg-3:      var(--bg-panel-strong);
  --fg:        var(--text-primary);
  --fg-dim:    var(--text-secondary);
  --accent:    var(--nebula-cyan);
  --accent-2:  var(--nebula-pink);
  --warn:      #ffd740;
  --green:     #00e676;
  --red:       #ff5252;
  --blue:      #00b0ff;
  --border:    rgba(255, 255, 255, 0.06);
  --btn:       var(--bg-panel-strong);
  --btn-hover: rgba(15, 20, 40, 0.95);
  --shadow:    0 6px 18px rgba(0, 0, 0, 0.35);
  /* --ok wird vom Countdown-„Go" gelesen (style.css:635). */
  --ok:        #00e676;
}

/* ── Schriften ──────────────────────────────────────────────────────────
   Self-hosted Schriften — kein Drittanbieter-Request, keine
   Datenschutzprobleme durch Google-Fonts. Die .woff2-Dateien werden
   parallel von einem anderen Agenten nach public/assets/fonts/ gelegt;
   fehlen sie, fällt der Browser auf den Fallback-Stack zurück. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}