/* ==========================================================================
   tokens.css — Design-Tokens (Farben, Abstände, Radien)
   Ein Ort für das komplette Farbsystem. Light- und Dark-Mode entstehen
   ausschließlich durch Umschalten dieser Variablen; die Komponenten-CSS
   nutzen nur noch die semantischen Tokens (--bg, --surface, --text …).
   ========================================================================== */

:root {
  /* --- Markenfarben (in beiden Themes gleich) --- */
  --navy:      #071f3e;
  --navy-2:    #0d315e;
  --forest:    #314c3e;
  --forest-2:  #263e32;
  --gold:      #ad9166;
  --gold-soft: #c7ad82;
  --sand:      #e6dac8;

  /* --- Semantische Tokens · LIGHT --- */
  --bg:            #f7f3ea;   /* Seitenhintergrund            */
  --surface:       #fffdf8;   /* Karten / Panels              */
  --surface-2:     #f4ecdf;   /* zarte Sekundärfläche         */
  --surface-solid: #ffffff;   /* volldeckende Karten (Produkte) */
  --text:          #101820;   /* Fließtext-Überschriften      */
  --text-soft:     #2f3b45;   /* etwas weicherer Text         */
  --text-muted:    #65717e;   /* Absätze / Sekundärtext       */
  --border:        rgba(25,35,43,.14);
  --shadow:        0 26px 70px rgba(20,29,38,.12);

  --header-bg:     rgba(247,243,234,.88);
  --header-border: rgba(49,76,62,.12);

  /* Hero-Overlay (heller Verlauf über dem Foto) + Fade nach unten */
  --hero-overlay-a: rgba(247,243,234,.97);
  --hero-overlay-b: rgba(247,243,234,.92);
  --hero-overlay-c: rgba(247,243,234,.22);
  --hero-overlay-d: rgba(247,243,234,.06);
  --hero-fade:      var(--bg);

  /* Inhaltslinks (im Fließtext, Rechtsseiten) */
  --link:       #8a6d3f;
  --link-hover: #5f4a26;

  /* Formularfelder */
  --input-bg:     #ffffff;
  --input-border: rgba(25,35,43,.22);
  --input-focus:  var(--forest);

  /* Struktur */
  --radius: 28px;
  --max:    min(1200px, calc(100vw - 44px));

  color-scheme: light;
}

/* --- Semantische Tokens · DARK ---------------------------------------------
   Als wiederverwendbarer Block: einmal für den manuellen Umschalter
   ([data-theme="dark"]) und einmal für die Systemeinstellung.            */
:root[data-theme="dark"] {
  --bg:            #0a1120;
  --surface:       #111d33;
  --surface-2:     #0e1830;
  --surface-solid: #14213b;
  --text:          #e9eef5;
  --text-soft:     #c7d2df;
  --text-muted:    #93a3b6;
  --border:        rgba(255,255,255,.12);
  --shadow:        0 26px 70px rgba(0,0,0,.5);

  --header-bg:     rgba(9,15,28,.82);
  --header-border: rgba(255,255,255,.10);

  --hero-overlay-a: rgba(9,15,28,.94);
  --hero-overlay-b: rgba(9,15,28,.85);
  --hero-overlay-c: rgba(9,15,28,.35);
  --hero-overlay-d: rgba(9,15,28,.10);
  --hero-fade:      var(--bg);

  --link:       #d8bd8f;
  --link-hover: #ecd6ac;

  --input-bg:     #0e1830;
  --input-border: rgba(255,255,255,.18);
  --input-focus:  var(--gold);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:            #0a1120;
    --surface:       #111d33;
    --surface-2:     #0e1830;
    --surface-solid: #14213b;
    --text:          #e9eef5;
    --text-soft:     #c7d2df;
    --text-muted:    #93a3b6;
    --border:        rgba(255,255,255,.12);
    --shadow:        0 26px 70px rgba(0,0,0,.5);
    --header-bg:     rgba(9,15,28,.82);
    --header-border: rgba(255,255,255,.10);
    --hero-overlay-a: rgba(9,15,28,.94);
    --hero-overlay-b: rgba(9,15,28,.85);
    --hero-overlay-c: rgba(9,15,28,.35);
    --hero-overlay-d: rgba(9,15,28,.10);
    --link:       #d8bd8f;
    --link-hover: #ecd6ac;
    --input-bg:     #0e1830;
    --input-border: rgba(255,255,255,.18);
    --input-focus:  var(--gold);
    color-scheme: dark;
  }
}