/* ============================================================
   tokens.css — einzige Farb- und Größenquelle (PLAN.md §2).
   Kein Hexwert außerhalb dieser Datei. Abgenommen via token-preview.html.
   ============================================================ */

:root {
  /* Farbe — Light */
  --bg: #f3f5f9;
  --surface: #fbfcfe;
  --ink: #1a2233;
  --accent: #3b82f6;
  --accent-deep: #2457d6;
  --live: #15803d;
  /* Warnton — bisher nur auf der dunklen Hero-Bühne (Showcase) im Einsatz */
  --warn: #fbbf24;

  /* App-Mockup (Showcase-Frame): fixes Light-Set im Produkt-Look,
     unabhängig vom Site-Theme — der Frame wirkt wie ein Screenshot */
  --app-bg: #eef1f6;
  --app-card: #ffffff;
  --app-navy: #0e1c30;
  --app-ink: #22304a;
  --app-muted: #7a8699;
  --app-line: #e3e8f0;
  --app-blue: #3b82f6;
  --app-green: #10b981;
  --app-red: #ef4444;
  --app-amber: #f59e0b;
  --app-purple: #a855f7;

  /* 68 % statt 62 % aus PLAN §2: 62 % ergibt auf --bg nur ≈4,4:1 — Qualitätsboden verlangt ≥4,5:1 */
  --muted: color-mix(in srgb, var(--ink) 68%, var(--bg));
  --edge: color-mix(in srgb, var(--ink) 8%, transparent);

  /* Hero-Bühne: auch im Light Mode bewusst dunkel (PLAN.md §3a) */
  --stage-bg: #12161f;
  --stage-surface: #1a2029;
  --stage-ink: #e8ebf2;
  --stage-accent: #60a5fa;
  --stage-accent-deep: #8ab8fc;
  --stage-muted: color-mix(in srgb, var(--stage-ink) 62%, var(--stage-bg));
  --stage-edge: color-mix(in srgb, var(--stage-ink) 8%, transparent);

  /* Button: Light = accent-deep, Dark = accent (wie token-preview) */
  --btn-bg: var(--accent-deep);
  --on-accent: #fbfcfe;

  /* Typografie */
  --font-display: "Archivo", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --fs-display: clamp(2.75rem, 7vw, 5.5rem);
  --fs-h1: clamp(2.4rem, 5vw, 3.6rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-fine: 13.5px;
  --fs-mono: 12.5px;
  --fs-label: 11px;

  --lh-display: 1.0;
  --lh-body: 1.6;
  --track-display: -0.03em;
  --measure: 68ch;

  /* Raum — Skala 4/8/12/16/24/32/48/64/96/144 (nichts dazwischen) */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-144: 144px;

  --section-pad: var(--sp-64);
  --max-w: 1200px;

  /* Tiefe: Radius 6px überall, 1px-Innenkante, ein weicher Schatten */
  --radius: 6px;
  --shadow: 0 16px 40px -16px color-mix(in srgb, var(--ink) 22%, transparent);

  /* Motion: 200–350ms, ein Easing */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;
  --dur-slow: 350ms;
}

/* Dark-Set als Mixin: einmal definiert, von OS-Query und explizitem Toggle genutzt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161f;
    --surface: #1a2029;
    --ink: #e8ebf2;
    --accent: #60a5fa;
    --accent-deep: #8ab8fc;
    --live: #34c07c;
    --btn-bg: var(--accent);
    --on-accent: #12161f;
  }
}
:root[data-theme="dark"] {
  --bg: #12161f;
  --surface: #1a2029;
  --ink: #e8ebf2;
  --accent: #60a5fa;
  --accent-deep: #8ab8fc;
  --live: #34c07c;
  --btn-bg: var(--accent);
  --on-accent: #12161f;
}
/* [data-theme="light"] braucht keine Werte — :root ist bereits Light; die OS-Query oben schließt es aus. */

@media (max-width: 800px) {
  :root {
    --section-pad: var(--sp-48);
  }
}