/* ============================================================================
   WM-App Design Tokens
   ----------------------------------------------------------------------------
   Single Source of Truth für Farben, Typo, Spacing, Radii.
   Inline-Styles im HTML/JSX überschreiben das hier nicht — die werden in
   Commit 2 stückweise abgelöst. Ziel ist: neue/migrierte Stellen nutzen
   diese Tokens, sodass eine zentrale Änderung global wirkt.

   Namensraum-Konvention:
     --c-*       Farben
     --fs-*      Font-Sizes
     --space-*   Abstände
     --r-*       Border-Radii
     --font-*    Schriftfamilien
     --shadow-*  Schatten
     --tap-min   Mindest-Touch-Target (44 normal, 56 in Comfort-Mode)
   ============================================================================ */

:root {
  /* ── Bälz Brand & Signale ─────────────────────────────────────────────── */
  --c-gold:           #E3A505;
  --c-gold-dark:      #BA8600;
  --c-gold-light:     #F5B030;
  --c-gold-glow:      rgba(227, 165, 5, 0.30);
  --c-gold-soft:      rgba(227, 165, 5, 0.10);
  --c-gold-border:    rgba(227, 165, 5, 0.25);

  --c-red:            #E30613;
  --c-red-soft:       rgba(227, 6, 19, 0.10);

  --c-green:          #22c55e;
  --c-green-soft:     rgba(34, 197, 94, 0.15);
  --c-green-border:   rgba(34, 197, 94, 0.40);

  --c-blue:           #3b82f6;
  --c-blue-soft:      rgba(59, 130, 246, 0.10);

  --c-purple:         #a855f7;
  --c-purple-soft:    rgba(168, 85, 247, 0.10);

  --c-danger:         #f87171;
  --c-danger-soft:    rgba(248, 113, 113, 0.10);

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --c-bg:             #0f1117;
  --c-bg-soft:        #1a1500;
  --c-card:           rgba(255, 255, 255, 0.04);
  --c-card-strong:    rgba(255, 255, 255, 0.07);
  --c-border:         rgba(255, 255, 255, 0.08);
  --c-border-soft:    rgba(255, 255, 255, 0.05);
  --c-input-bg:       rgba(255, 255, 255, 0.07);

  /* ── Text — Kontraste gegenüber heute deutlich angehoben ──────────────── */
  --c-text:           #ffffff;
  --c-text-2:         rgba(255, 255, 255, 0.78);  /* war .60 */
  --c-text-3:         rgba(255, 255, 255, 0.62);  /* war .42 — WCAG-relevant */
  --c-text-4:         rgba(255, 255, 255, 0.45);
  --c-text-disabled:  rgba(255, 255, 255, 0.30);

  /* ── Type Scale (Mobile-Defaults) ─────────────────────────────────────── */
  --fs-xs:            13px;
  --fs-sm:            14px;
  --fs-base:          16px;   /* Body Mindestmaß auf Mobile */
  --fs-lg:            18px;
  --fs-xl:            23px;
  --fs-2xl:           30px;
  --fs-num:           34px;   /* Punkte-Zahlen */
  --fs-display:       42px;   /* Hero-Headlines */

  --lh-tight:         1.15;
  --lh-snug:          1.35;
  --lh-normal:        1.55;
  --lh-loose:         1.75;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-caps:    0.12em;   /* für UPPERCASE-Labels */

  /* ── Schriften ────────────────────────────────────────────────────────── */
  --font-body:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:     'Barlow Condensed', system-ui, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          24px;
  --space-6:          32px;
  --space-7:          48px;
  --space-8:          64px;

  /* ── Radii (spitzer/eckiger Stil, global halbiert) ────────────────────── */
  --r-sm:             4px;
  --r-md:             6px;
  --r-lg:             8px;
  --r-xl:             10px;
  --r-pill:           999px;

  /* ── Frost-Panel (Gold) ───────────────────────────────────────────────────
     Rezept "frost-panel": eine Box mit minimalem Glas-Look und goldenem
     Rahmen. Innen werden Reihen durch .frost-panel-divider getrennt (gold,
     noch dezenter als der Außenrand). Utility-Klassen in components.css. */
  --frost-bg:         rgba(255, 255, 255, 0.006);
  --frost-blur:       1.5px;
  --frost-border:     rgba(227, 165, 5, 0.22);
  --frost-divider:    rgba(227, 165, 5, 0.18);

  /* ── Schatten & Glows ─────────────────────────────────────────────────── */
  --shadow-card:      0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-gold:      0 5px 18px var(--c-gold-glow);
  --focus-glow:       0 0 0 2px var(--c-gold-glow), 0 0 16px rgba(227, 165, 5, 0.12);

  /* ── Touch-Targets (Apple HIG / WCAG AAA) ─────────────────────────────── */
  --tap-min:          44px;

  /* ── Z-Index-Skala ────────────────────────────────────────────────────── */
  --z-base:           1;
  --z-header:         100;
  --z-nav:            100;
  --z-overlay:        500;
  --z-toast:          1000;
}

/* ============================================================================
   Kompat-Layer — Alias auf die alten Kurz-Variablen aus index.html
   ----------------------------------------------------------------------------
   Die heutige inline <style> in public/index.html definiert --y, --yd, --td,
   --tm, --g, --b, --bg, --card, --border. Da unsere Stylesheets NACH dem
   inline <style> geladen werden, gewinnen die folgenden :root-Regeln und
   propagieren neue Werte an die 60+ Stellen, die `var(--td)` benutzen.

   In Commit 2 ziehen wir die Verwendungen auf die neuen Token-Namen um,
   dann kann dieser Block entfernt werden.
   ============================================================================ */
:root {
  --y:  var(--c-gold);
  --yd: var(--c-gold-dark);
  --yg: var(--c-gold-glow);
  --ys: var(--c-gold-soft);
  --r:  var(--c-red);
  --g:  var(--c-green);
  --gd: var(--c-green-soft);
  --b:  var(--c-blue);
  --bg: var(--c-bg);
  --card:   var(--c-card);
  --border: var(--c-border);

  /* Kontrast-Bump: .60 → .78, .42 → .62 — viele Labels werden lesbarer */
  --tm: var(--c-text-2);
  --td: var(--c-text-3);
}

/* ============================================================================
   Comfort Mode — Toggle auf <html class="comfort"> hochskaliert alles
   ============================================================================ */
html.comfort {
  --fs-xs:            14px;
  --fs-sm:            15px;
  --fs-base:          18px;
  --fs-lg:            20px;
  --fs-xl:            26px;
  --fs-2xl:           32px;
  --fs-num:           36px;
  --fs-display:       48px;

  --space-3:          14px;
  --space-4:          18px;

  --tap-min:          56px;
}

/* ============================================================================
   Tablet & Desktop — Type-Scale waechst mit dem Viewport
   ----------------------------------------------------------------------------
   Mobile-Defaults (oben) bleiben bei 15 px Body. Tablet bekommt +1 px, Desktop
   +2 px und alle Headline-Stufen entsprechend mit. Komponenten skalieren
   automatisch mit, solange sie var(--fs-*) verwenden.
   ============================================================================ */
@media (min-width: 768px) {
  :root {
    --fs-base:        17px;
    --fs-lg:          19px;
    --fs-xl:          25px;
    --fs-display:     50px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-xs:          17px;
    --fs-sm:          18px;
    --fs-base:        22px;
    --fs-lg:          24px;
    --fs-xl:          31px;
    --fs-2xl:         39px;
    --fs-num:         41px;
    --fs-display:     65px;
  }

  /* Comfort-Mode auf Desktop noch eine Stufe groesser, damit der A11y-Sprung
     gegenueber Desktop-Normal sichtbar bleibt (sonst wuerde Normal-Desktop
     fast den Comfort-Mobile-Wert erreichen). */
  html.comfort {
    --fs-xs:          19px;
    --fs-sm:          20px;
    --fs-base:        25px;
    --fs-lg:          28px;
    --fs-xl:          34px;
    --fs-2xl:         43px;
    --fs-num:         47px;
    --fs-display:     69px;
  }
}

/* ============================================================================
   Reduced Motion — System-Preference respektieren
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0.01ms;
  }
}