/* ═══════════════════════════════════════════════════════════════
   Designsystem — Freibad Eckbusch
   Farben in oklch: gleichmäßig wahrgenommene Helligkeit, saubere
   Abstufungen und verlässlicher Kontrast in beiden Themes.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Wasser: die Grundfarbe des Bades ── */
  --water-50:  oklch(97% 0.018 220);
  --water-100: oklch(93% 0.038 220);
  --water-200: oklch(86% 0.070 218);
  --water-300: oklch(78% 0.105 215);
  --water-400: oklch(70% 0.130 213);
  --water-500: oklch(62% 0.140 212);
  --water-600: oklch(53% 0.128 213);
  --water-700: oklch(44% 0.105 215);
  --water-800: oklch(34% 0.078 218);
  --water-900: oklch(25% 0.055 222);
  --water-950: oklch(17% 0.040 226);

  /* ── Sonne: der warme Akzent ── */
  --sun-200: oklch(94% 0.090 88);
  --sun-300: oklch(89% 0.135 85);
  --sun-400: oklch(84% 0.165 80);
  --sun-500: oklch(78% 0.170 72);
  --sun-600: oklch(70% 0.165 62);

  /* ── Sand: warme Flächen, die Weiß auflockern ── */
  --sand-50:  oklch(98.5% 0.008 85);
  --sand-100: oklch(96% 0.014 82);
  --sand-200: oklch(92% 0.022 80);
  --sand-300: oklch(86% 0.030 78);

  /* ── Signal ── */
  --open:   oklch(72% 0.170 145);
  --closed: oklch(64% 0.190 25);

  --ink-900: oklch(21% 0.020 240);
  --ink-700: oklch(38% 0.018 240);
  --ink-500: oklch(54% 0.014 240);

  /* ── Semantische Zuweisung: heller Modus ── */
  --bg:            var(--sand-50);
  --bg-raised:     oklch(100% 0 0);
  --bg-sunken:     var(--sand-100);
  --bg-invert:     var(--water-950);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-invert:   var(--sand-50);

  --accent:        var(--water-600);
  --accent-hover:  var(--water-700);
  --accent-soft:   var(--water-100);
  --highlight:     var(--sun-500);

  --border:        oklch(88% 0.012 230);
  --border-strong: oklch(78% 0.020 230);

  --shadow-color: 220 40% 20%;
  --shadow-sm: 0 1px 2px oklch(var(--water-950) / 0.06);
  --shadow-md: 0 4px 16px -4px oklch(30% 0.05 230 / 0.14);
  --shadow-lg: 0 18px 48px -12px oklch(30% 0.05 230 / 0.22);
  --shadow-xl: 0 32px 80px -20px oklch(30% 0.05 230 / 0.30);

  /* ── Typografie ──
     Fließende Größen zwischen 360px und 1600px Viewport.         */
  --font-display: "Bricolage", "Trebuchet MS", "Gill Sans", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.45rem, 1.25rem + 0.95vw, 2.05rem);
  --step-3:  clamp(1.75rem, 1.40rem + 1.70vw, 2.90rem);
  --step-4:  clamp(2.10rem, 1.50rem + 2.90vw, 4.10rem);
  --step-5:  clamp(2.55rem, 1.50rem + 4.90vw, 5.90rem);
  --step-6:  clamp(3.00rem, 1.20rem + 8.20vw, 8.50rem);

  /* ── Raum ── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.25rem;
  --space-2xl: 5rem;
  --space-3xl: clamp(4rem, 10vw, 9rem);

  /* ── Maße ── */
  --content-width: 68rem;
  --wide-width: 88rem;
  --prose-width: 40rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-full: 999rem;

  /* ── Bewegung ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration: 320ms;
  --duration-slow: 640ms;

  color-scheme: light dark;
}

/* ═══ Dunkler Modus: „Abendschwimmen“ ═══
   Nicht nur invertiert — tiefes Nachtblau, die Akzente leuchten stärker. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        var(--water-950);
    --bg-raised: oklch(21% 0.042 228);
    --bg-sunken: oklch(14% 0.035 228);
    --bg-invert: var(--sand-50);

    --text:        oklch(95% 0.012 220);
    --text-muted:  oklch(72% 0.020 220);
    --text-invert: var(--water-950);

    --accent:       var(--water-300);
    --accent-hover: var(--water-200);
    --accent-soft:  oklch(28% 0.060 220);
    --highlight:    var(--sun-400);

    --border:        oklch(30% 0.030 228);
    --border-strong: oklch(42% 0.045 226);

    --shadow-md: 0 4px 16px -4px oklch(0% 0 0 / 0.5);
    --shadow-lg: 0 18px 48px -12px oklch(0% 0 0 / 0.6);
    --shadow-xl: 0 32px 80px -20px oklch(0% 0 0 / 0.7);
  }
}

/* Die Umschaltung im Kopfbereich muss beide Richtungen erzwingen können. */
:root[data-theme="dark"] {
  --bg:        var(--water-950);
  --bg-raised: oklch(21% 0.042 228);
  --bg-sunken: oklch(14% 0.035 228);
  --bg-invert: var(--sand-50);

  --text:        oklch(95% 0.012 220);
  --text-muted:  oklch(72% 0.020 220);
  --text-invert: var(--water-950);

  --accent:       var(--water-300);
  --accent-hover: var(--water-200);
  --accent-soft:  oklch(28% 0.060 220);
  --highlight:    var(--sun-400);

  --border:        oklch(30% 0.030 228);
  --border-strong: oklch(42% 0.045 226);

  --shadow-md: 0 4px 16px -4px oklch(0% 0 0 / 0.5);
  --shadow-lg: 0 18px 48px -12px oklch(0% 0 0 / 0.6);
  --shadow-xl: 0 32px 80px -20px oklch(0% 0 0 / 0.7);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        var(--sand-50);
  --bg-raised: oklch(100% 0 0);
  --bg-sunken: var(--sand-100);
  --bg-invert: var(--water-950);

  --text:        var(--ink-900);
  --text-muted:  var(--ink-500);
  --text-invert: var(--sand-50);

  --accent:       var(--water-600);
  --accent-hover: var(--water-700);
  --accent-soft:  var(--water-100);
  --highlight:    var(--sun-500);

  --border:        oklch(88% 0.012 230);
  --border-strong: oklch(78% 0.020 230);

  color-scheme: light;
}