/* assets/css/tokens.css — Design-Tokens "Darkroom" fuer die Website.
   Abgeleitet aus Boothdock-Hub/app/styles/tokens.css (Studio Light/Dark)
   und Boothdock-Studio/app/styles/tokens.css (Darkroom) — Amber-Safelight
   als einzige Signalfarbe statt des alten Navy/Cyan. Helles Thema ist
   Standard (Marketing-Seite), dunkles Thema vollwertig mitgedacht.
   EINZIGE Quelle fuer Farben/Radien/Typo/Abstaende - kein Bereichs-CSS
   definiert eigene Farbwerte. */

:root {
  color-scheme: light;

  /* Radien */
  --r: 10px;
  --r-lg: 16px;

  /* Abstands-Skala (4er-Raster) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Typo: Inter selbst gehostet (assets/fonts/), Monospace als
     System-Stack (noch kein selbst gehostetes Mono-Webfont, siehe
     CLAUDE.md - kein Download ohne Rueckfrage). */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Consolas", "SF Mono", monospace;

  /* Grund: warmes Papierweiss (identisch zu Hub-Tokens) */
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #faf8f4;
  --surface-3: #edeae4;

  --line: rgba(28, 27, 24, .10);
  --line-strong: rgba(28, 27, 24, .20);

  --ink: #1c1b18;
  --ink-muted: #5f5c55;
  /* War #8d8a82 (3.08-3.45:1 gegen helle Oberflaechen, WCAG-AA-Minimum
     4.5:1) - zweiter Kontrast-Fund im selben PageSpeed-Insights-Lauf
     26.08., betrifft Footer-Ueberschriften/Bildunterschriften/
     Preisrechner-Mikrolabels. Gleicher Farbton, nur dunkler. */
  --ink-faint: #716f67;

  /* Signal: Amber-Safelight. --accent bleibt fuer Flaechen (Buttons,
     Glows) unveraendert - dort gilt Kontrast Text-gegen-Akzent, nicht
     Akzent-gegen-Grund. --accent-strong wird als TEXTFARBE genutzt
     (Eyebrow-Labels, Logo-"Dock", Karten-Tags) und war mit #c8790a nur
     3.39:1 gegen Weiss (WCAG-AA-Minimum fuer Normaltext: 4.5:1, PageSpeed-
     Insights-Fund 26.08.) - auf #985c08 nachgedunkelt (gleicher Farbton/
     Saettigung, nur dunkler), erreicht >=4.5:1 gegen alle hellen
     Oberflaechen-Toene (Weiss/surface-2/surface-3). */
  --accent: #f5a524;
  --accent-strong: #985c08;
  --accent-soft: rgba(245, 165, 36, .14);
  --accent-line: rgba(200, 130, 10, .45);
  --accent-ink: #1d1503;

  --rec: #c02b1f;
  --rec-soft: rgba(192, 43, 31, .10);
  /* War #3f7d2c - 4.49:1 gegen den Seitenhintergrund (--bg, wo die
     "Ja"-Haekchen der Feature-Vergleichstabelle direkt drauf sitzen),
     0.01 unter dem WCAG-AA-Minimum 4.5:1 (PageSpeed-Fund 26.08.). Minimal
     nachgedunkelt. */
  --ok: #3f7c2c;
  --ok-soft: rgba(63, 125, 44, .12);

  --shadow-sm: 0 1px 2px rgba(28, 27, 24, .06);
  --shadow: 0 4px 14px rgba(28, 27, 24, .08);
  --shadow-lg: 0 24px 60px rgba(28, 27, 24, .16);
}

/* Dunkles Thema via System (solange kein data-theme="light") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0e11;
    --surface: #161519;
    --surface-2: #1d1c21;
    --surface-3: #26252b;
    --line: rgba(242, 239, 233, .08);
    --line-strong: rgba(242, 239, 233, .16);
    --ink: #f2efe9;
    --ink-muted: #a09d96;
    --ink-faint: #86847c;
    --accent: #f5a524;
    --accent-strong: #ffb638;
    --accent-soft: rgba(245, 165, 36, .14);
    --accent-line: rgba(245, 165, 36, .40);
    --accent-ink: #1d1503;
    --rec: #ff4438;
    --rec-soft: rgba(255, 68, 56, .14);
    --ok: #8fce6e;
    --ok-soft: rgba(143, 206, 110, .14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
  }
}

/* Dunkles Thema erzwungen via data-theme="dark" (Umschalter) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0e11;
  --surface: #161519;
  --surface-2: #1d1c21;
  --surface-3: #26252b;
  --line: rgba(242, 239, 233, .08);
  --line-strong: rgba(242, 239, 233, .16);
  --ink: #f2efe9;
  --ink-muted: #a09d96;
  --ink-faint: #86847c;
  --accent: #f5a524;
  --accent-strong: #ffb638;
  --accent-soft: rgba(245, 165, 36, .14);
  --accent-line: rgba(245, 165, 36, .40);
  --accent-ink: #1d1503;
  --rec: #ff4438;
  --rec-soft: rgba(255, 68, 56, .14);
  --ok: #8fce6e;
  --ok-soft: rgba(143, 206, 110, .14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
}