/* ============================================================================
 *  DESIGN TOKENS
 * ----------------------------------------------------------------------------
 *  Strukturelle Tokens (Radien, Easing, Schatten, Typo) sind themeunabhängig.
 *  Die FARB-Variablen hier sind nur Fallbacks (= Dark-Palette), damit der
 *  erste Frame korrekt aussieht. Zur Laufzeit überschreibt core/theme.js sie
 *  mit den Werten aus config.theme  →  echtes White-Label-Theming.
 * ========================================================================== */
:root {
  /* Layout */
  --max: 440px;

  /* Radien */
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* Bewegung — „butterweich" */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  --dur:      .28s;
  --dur-fast: .16s;
  --dur-slow: .6s;

  /* Typografie */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Schatten (nutzen --shadow aus der Palette) */
  --shadow-card: 0 10px 34px -16px var(--shadow);
  --shadow-pop:  0 30px 70px -24px var(--shadow);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 12px 40px -16px var(--glow);

  /* ── Farb-Fallbacks (Dark = „Mitternachts-Oase") ───────────────────────── */
  --bg: #141513;
  --bg-2: #1f1d1a;
  --bg-glow: rgba(191,198,184,.18);
  --surface: rgba(35,35,32,.72);
  --surface-solid: #1f1d1a;
  --surface-2: rgba(50,52,46,.66);
  --surface-3: #2b2e28;
  --border: rgba(255,255,255,.10);
  --sep: rgba(255,255,255,.075);
  --text: #edefea;
  --text-2: #a8b0a2;
  --text-3: #7a8177;
  --accent: #bfc6b8;
  --accent-ink: #1f1d1a;
  --accent-soft: rgba(191,198,184,.15);
  --accent-2: #dcd2d0;
  --accent-2-soft: rgba(220,210,208,.15);
  --glow: rgba(191,198,184,.28);
  --success: #54d493;
  --warn: #f3c75a;
  --danger: #ff7070;
  --shadow: rgba(0,0,0,.55);
}

/* Ton-Utilities: setzen --tone für Punkte, Balken & Score-Ring */
.is-good { --tone: var(--success); }
.is-mid  { --tone: var(--warn); }
.is-low  { --tone: var(--danger); }