/* ==========================================================================
   Design-Tokens
   Eine einzige Quelle fuer Farben, Abstaende, Radien, Schatten, Typografie.
   Light ist die Basis; Dark ueberschreibt nur die Farbwerte.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- Typografie */
  --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* --------------------------------------------------------------- Raster */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 999px;

  --shell-max: 1180px;
  --header-h: 66px;

  /* ------------------------------------------------- Farben (Light Mode) */
  /* Warme, neutrale Grundflaeche statt kaltem Weiss */
  --bg: #f7f5f1;
  --bg-tint: #efece5;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-sunken: #f1eee8;

  --text: #191816;
  --text-muted: #6a655c;
  --text-subtle: #948e83;
  --text-on-fill: #ffffff;

  --border: #e3ded4;
  --border-strong: #cdc6b8;

  /* Markenfarbe: Indigo – bewusst weit weg von Gruen/Gelb/Rot,
     damit sie nie mit dem Spiel-Feedback verwechselt wird. */
  --accent: #5b55cc;
  --accent-hover: #4a45b8;
  --accent-soft: #ecebfb;
  --accent-text: #413bab;

  /* Feedback – gedeckt, kontraststark, nicht grell */
  --ok: #3d8159;
  --ok-soft: #e2efe7;
  --ok-text: #2c6243;

  --warn: #c98f2c;
  --warn-fg: #2a2110;
  --warn-soft: #faf0d9;
  --warn-text: #8a6115;

  --bad: #b5564a;
  --bad-soft: #f8e6e3;
  --bad-text: #8f4038;

  --focus: #5b55cc;

  /* ------------------------------------------------------------ Schatten */
  --shadow-xs: 0 1px 2px rgb(25 24 22 / 0.05);
  --shadow-sm: 0 1px 3px rgb(25 24 22 / 0.07), 0 1px 2px rgb(25 24 22 / 0.04);
  --shadow-md: 0 4px 14px rgb(25 24 22 / 0.08), 0 1px 3px rgb(25 24 22 / 0.05);
  --shadow-lg: 0 16px 40px rgb(25 24 22 / 0.12), 0 3px 10px rgb(25 24 22 / 0.06);
  --shadow-accent: 0 6px 18px rgb(91 85 204 / 0.28);

  /* ------------------------------------------------------------- Timing */
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.5, 1);

  color-scheme: light;
}

/* ------------------------------------------------------------- Dark Mode */
/* Gilt automatisch nach Systemeinstellung, ausser der Nutzer hat
   explizit "hell" gewaehlt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14151a;
    --bg-tint: #191b21;
    --surface: #1d1f26;
    --surface-2: #232630;
    --surface-sunken: #171920;

    --text: #f0eee9;
    --text-muted: #a4a1a8;
    --text-subtle: #7b7883;
    --text-on-fill: #ffffff;

    --border: #2e313b;
    --border-strong: #434652;

    --accent: #8c86ff;
    --accent-hover: #a29cff;
    --accent-soft: #262a48;
    --accent-text: #b4afff;

    --ok: #45906a;
    --ok-soft: #1e2f27;
    --ok-text: #7fc79c;

    --warn: #c9932f;
    --warn-fg: #241c0c;
    --warn-soft: #302710;
    --warn-text: #e3b45c;

    --bad: #bb5d4f;
    --bad-soft: #341f1c;
    --bad-text: #e29387;

    --focus: #a29cff;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 18px 44px rgb(0 0 0 / 0.55);
    --shadow-accent: 0 6px 18px rgb(140 134 255 / 0.25);

    color-scheme: dark;
  }
}

/* Explizite Nutzerwahl gewinnt immer – in beide Richtungen. */
:root[data-theme='dark'] {
  --bg: #14151a;
  --bg-tint: #191b21;
  --surface: #1d1f26;
  --surface-2: #232630;
  --surface-sunken: #171920;

  --text: #f0eee9;
  --text-muted: #a4a1a8;
  --text-subtle: #7b7883;
  --text-on-fill: #ffffff;

  --border: #2e313b;
  --border-strong: #434652;

  --accent: #8c86ff;
  --accent-hover: #a29cff;
  --accent-soft: #262a48;
  --accent-text: #b4afff;

  --ok: #45906a;
  --ok-soft: #1e2f27;
  --ok-text: #7fc79c;

  --warn: #c9932f;
  --warn-fg: #241c0c;
  --warn-soft: #302710;
  --warn-text: #e3b45c;

  --bad: #bb5d4f;
  --bad-soft: #341f1c;
  --bad-text: #e29387;

  --focus: #a29cff;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 18px 44px rgb(0 0 0 / 0.55);
  --shadow-accent: 0 6px 18px rgb(140 134 255 / 0.25);

  color-scheme: dark;
}