/*
 * tokens.css — Steuerlupe Public-Design-Tokens (B30, vollaudit-2026-05-10)
 * Eingeführt: 2026-05-11
 *
 * ZENTRALER TOKEN-FILE für die Public-Sprache (DM Sans + DM Serif Display + Cyan-Hue).
 * Schwester-Block für die Admin-Sprache: admin-frontend/_lib/admin-tokens.css
 * (Inter + Fraunces + shadcn-HSL — bewusst andere Welt, siehe Sektion-H des Vollaudits).
 *
 * STRATEGIE — vorsichtig, in Schichten:
 *
 * 1. Diese Datei definiert kanonische `--sl-*`-Tokens (Steuerlupe-Sub-Sprach-Prefix
 *    analog zu artikel-components.css `--sl-blue`/`--sl-radius`-Vorbild).
 * 2. Compatibility-Aliase am Ende mappen die Bestand-Token-Namen `--blue`/`--teal`/
 *    `--navy`/`--bg`/`--radius` auf die kanonischen `--sl-*`-Werte. Damit funktionieren
 *    bestehende `:root`-Blöcke + Inline-Stylesheet-Verweise weiter ohne Pixel-Bruch.
 * 3. NEUE Komponenten und neue Public-HTMLs sollen `--sl-*` direkt verwenden.
 * 4. Bestand-Migration (~174 hardcoded Pill-Radius-Stellen, 4-Werte-Card-Radius-Drift,
 *    drei parallele Brand-Hue-Aliase) erfolgt File-für-File mit Browser-Pixel-Check
 *    in Folge-Wellen — siehe ISSUES.md #vollaudit-2026-05-10-b30 + B28.
 *
 * INKLUSION:
 *
 *   <link rel="stylesheet" href="_lib/tokens.css">
 *
 * Pfad relativ zur HTML-Datei. Pilot-Inclusion: erfolge.html (B30-Pilot).
 *
 * BEWUSSTE STIL-VARIANTEN (NICHT als Drift behandeln):
 *
 * - magazin-genese.html nutzt `--navy:#0a1226` als Editorial-Print-Sonderfarbe
 *   (dunkleres Navy für Print-Optik) — wird NICHT auf #0f172a vereinheitlicht.
 * - stopp/stopp-shared.css nutzt `--teal` statt `--blue` — Sub-Sprach-Bereich
 *   für Stopp-Module mit eigenem Branding.
 *
 * ECHTE DRIFT (in B30-Migrations-Backlog):
 * - Eine Stelle `--navy:#0a0e1a` (Schreibfehler, eigentlich #0f172a)
 * - Eine Stelle `--navy:#1e293b` (verschwommen mit --navy-light)
 * - 174 hardcoded Pill-Radius-Stellen (50px / 100px / 9999px) → `var(--sl-radius-pill)`
 * - 4-Werte Card-Radius-Drift (4 / 6 / 7 / 8 px) → `var(--sl-radius-card)` (B28)
 */

:root {
  /* ── Brand-Hue (Cyan/Teal — Steuerlupe-Markenfarbe) ── */
  --sl-blue:        #0097b2;
  --sl-blue-light:  #00b8d9;
  --sl-blue-dark:   #007a91;
  --sl-blue-bg:     rgba(0, 151, 178, .04);
  --sl-blue-bg-soft: rgba(0, 151, 178, .08);

  /* ── Akzent-Hue Gold (Editorial-Akzent für Hero, Premium-Badges) ── */
  --sl-gold:        #c9a84c;
  --sl-gold-light:  #e8c97a;
  --sl-gold-bg:     rgba(201, 168, 76, .06);

  /* ── Dark-Hue (Navy für Headlines auf Hell, Code-Backgrounds) ── */
  --sl-navy:        #0f172a;
  --sl-navy-light:  #1e293b;
  --sl-navy-mid:    #334155;

  /* ── Ink (Text-Hierarchie) ── */
  --sl-ink:         #0f172a;
  --sl-ink-sec:     #475569;
  --sl-ink-muted:   #94a3b8;

  /* ── Surface ── */
  --sl-bg:          #fafbfc;       /* Off-White-Page-Background, GitHub-Style */
  --sl-white:       #ffffff;
  --sl-border:      #e2e8f0;
  --sl-border-light: #f1f5f9;

  /* ── Status (Public-Werte; Admin nutzt eigene HSL-Tokens) ── */
  --sl-red:         #dc2626;
  --sl-red-bg:      rgba(220, 38, 38, .08);
  --sl-green:       #16a34a;
  --sl-green-bg:    rgba(22, 163, 74, .08);
  --sl-amber:       #d97706;
  --sl-amber-bg:    rgba(217, 119, 6, .08);
  --sl-violet:      #7c3aed;
  --sl-violet-bg:   rgba(124, 58, 237, .07);

  /* ── Radius ── */
  --sl-radius:      10px;          /* Generischer Default-Card-Radius (Bestand) */
  --sl-radius-card: 8px;           /* Kanonischer Card-Token (B28-Konsolidierung) */
  --sl-radius-pill: 9999px;        /* Pill / Badge / Status-Tag */
  --sl-radius-lg:   16px;          /* Hero-Cards, Modals */
  --sl-radius-xl:   22px;          /* Dialog-Container, Glass-Surfaces */
  --sl-radius-sm:   4px;           /* Code, Mini-Tags */

  /* ── Animation ── */
  --sl-ease:        cubic-bezier(.4, 0, .2, 1);

  /* ── Schatten ── */
  --sl-shadow:      0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --sl-shadow-md:   0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);
  --sl-shadow-lg:   0 10px 25px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .04);

  /* ── Typografie-Stacks (zur Eindeutigkeit, B26 Lehre) ── */
  --sl-font-body:   'DM Sans', system-ui, -apple-system, sans-serif;
  --sl-font-display: 'DM Serif Display', Georgia, serif;

  /* ──────────────────────────────────────────────────────────────────
   * COMPATIBILITY-ALIASE
   *
   * Bestand-Token-Namen mappen auf kanonische --sl-*-Werte. Damit
   * funktionieren existierende Stylesheets und Inline-Styles weiter
   * ohne Pixel-Bruch. NEUE Komponenten sollen --sl-* direkt verwenden.
   *
   * Diese Aliase werden gepflegt bis File-für-File-Migration vollständig
   * ist (B30-Backlog). Danach können die :root-Blöcke der einzelnen
   * Stylesheets entfernt werden und tokens.css wird Single-Source.
   * ────────────────────────────────────────────────────────────────── */
  --blue:           var(--sl-blue);
  --blue-light:     var(--sl-blue-light);
  --blue-dark:      var(--sl-blue-dark);
  --blue-bg:        var(--sl-blue-bg);
  --teal:           var(--sl-blue);          /* drei parallele Aliase: teal/blue/sl-blue */
  --teal-light:     var(--sl-blue-light);
  --teal-dark:      var(--sl-blue-dark);
  --teal-bg:        var(--sl-blue-bg);
  --gold:           var(--sl-gold);
  --navy:           var(--sl-navy);
  --navy-light:     var(--sl-navy-light);
  --ink:            var(--sl-ink);
  --ink-sec:        var(--sl-ink-sec);
  --ink-muted:      var(--sl-ink-muted);
  --bg:             var(--sl-bg);
  --white:          var(--sl-white);
  --border:         var(--sl-border);
  --border-light:   var(--sl-border-light);
  --red:            var(--sl-red);
  --green:          var(--sl-green);
  --amber:          var(--sl-amber);
  --violet:         var(--sl-violet);
  --radius:         var(--sl-radius);
  --radius-card:    var(--sl-radius-card);
  --radius-pill:    var(--sl-radius-pill);
  --radius-lg:      var(--sl-radius-lg);
  --radius-xl:      var(--sl-radius-xl);
  --ease:           var(--sl-ease);
  --shadow:         var(--sl-shadow);
  --shadow-md:      var(--sl-shadow-md);
  --shadow-lg:      var(--sl-shadow-lg);
}