/* ============================================================
   Wasserturmsiedlung — Design-Tokens (2027 V1)
   Drei Themes: light ("Hell"), dark = GRÜN (Standard), project = BLAU ("Dunkel")
   Umschaltung über <html data-theme="light|dark|project">
   Primitives stammen aus dem bestehenden Designsystem
   (Siedlungs-Linie, styles.css :root) und bleiben unverändert.
   ============================================================ */

:root {
  /* --- Primitives (Bestandspalette, nicht direkt verwenden) --- */
  --wts-cream:       #fbfaf5;
  --wts-beige:       #e7e4d3;
  --wts-beige-warm:  #efe9d6;
  --wts-beige-soft:  #f3eedd;
  --wts-orange:      #d96827;
  --wts-orange-soft: #e88a52;
  --wts-orange-deep: #b04b14;
  --wts-moss:        #5a6b4e;
  --wts-moss-soft:   #7a8a6e;
  --wts-ink:         #1d3b2e;   /* Logo-Tannengrün */
  --wts-ink-soft:    #46594c;
  --wts-dark:        #36454f;
  --wts-line:        #d8cdb9;
  --wts-gold:        #c79a3a;
  --wts-night:       #16222e;   /* Nachtblau der dunklen Standardkarte */
  --wts-night-soft:  #1f2f3e;
  --wts-forest:      #14211a;   /* dunkles Tannengrün für Dark Mode */
  --wts-forest-soft: #1c2d24;

  /* --- Typografie --- */
  --font-head: 'Marcellus', serif;
  --font-body: 'Rethink Sans', system-ui, sans-serif;
  --fs-eyebrow: 0.78rem;
  --fs-body: 1.02rem;
  --fs-lead: 1.15rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.6rem, 3.2vw, 2.2rem);
  --fs-h1: clamp(2.1rem, 5vw, 3.2rem);
  --lh-body: 1.65;

  /* --- Abstände & Form --- */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5rem;
  --radius-s: 4px;        /* Kern-Designsystem: eckig bis leicht gerundet */
  --radius-m: 10px;
  --radius-pill: 999px;
  --maxw: 1160px;
  --maxw-narrow: 760px;

  /* --- Motion --- */
  --ease: cubic-bezier(.33,.1,.24,1);
  --dur-fast: 180ms;
  --dur-map: 350ms;       /* Kartenüberblendung lt. Spec 250–450ms */

  /* ============ Semantische Tokens: LIGHT (Default) ============ */
  --bg:              var(--wts-cream);
  --bg-soft:         var(--wts-beige-soft);
  --surface:         #ffffff;
  --surface-warm:    var(--wts-beige-warm);
  --surface-raised:  #ffffff;
  --text:            var(--wts-ink);
  --text-soft:       var(--wts-ink-soft);
  --heading:         var(--wts-ink);
  --accent:          var(--wts-orange);
  --accent-hover:    var(--wts-orange-deep);
  --accent-contrast: #ffffff;
  --line:            var(--wts-line);
  --line-soft:       #e8e2d2;
  --gold:            var(--wts-gold);
  --moss:            var(--wts-moss);
  --focus:           #8a5a1f;
  --shadow:          0 2px 14px rgba(29, 59, 46, .08);
  --shadow-raised:   0 8px 30px rgba(29, 59, 46, .14);
  --nav-bg:          rgba(251, 250, 245, .92);
  --chip-bg:         var(--wts-beige-soft);
  --chip-active-bg:  var(--wts-ink);
  --chip-active-tx:  var(--wts-cream);
  --map-glow:        none;

  /* Statusfarben (Projektstatus Karten) — mit Text/Symbol kombinieren */
  --status-existing:  #4d7c43;
  --status-planned:   #8f6b1e;
  --status-build:     #3f6fa8;
  --status-idea:      #a8542a;
  color-scheme: light;
}

/* ============ DARK ============ */
[data-theme="dark"] {
  --bg:              var(--wts-forest);
  --bg-soft:         var(--wts-forest-soft);
  --surface:         #22332a;
  --surface-warm:    #26382e;
  --surface-raised:  #2a3d32;
  --text:            var(--wts-beige-soft);
  --text-soft:       #c3c0ac;
  --heading:         var(--wts-cream);
  --accent:          var(--wts-orange-soft);
  --accent-hover:    #f0a06c;
  --accent-contrast: #1a130c;
  --line:            #3a4d40;
  --line-soft:       #314237;
  --gold:            #d9b05e;
  --moss:            var(--wts-moss-soft);
  --focus:           #e8c079;
  --shadow:          0 2px 14px rgba(0, 0, 0, .35);
  --shadow-raised:   0 10px 34px rgba(0, 0, 0, .5);
  --nav-bg:          rgba(20, 33, 26, .92);
  --chip-bg:         #2a3d32;
  --chip-active-bg:  var(--wts-beige-soft);
  --chip-active-tx:  var(--wts-forest);
  --map-glow:        none;
  --status-existing:  #7fb573;
  --status-planned:   #d9b05e;
  --status-build:     #7ea8d9;
  --status-idea:      #e08a5e;
  color-scheme: dark;
}

/* ============ PROJECT — "Siedlungs-Abend" ============
   Atmosphärisches Theme in der Nachtblau-Welt der dunklen
   Karten, mit warmem Laternenlicht als Akzent.            */
[data-theme="project"] {
  --bg:              var(--wts-night);
  --bg-soft:         var(--wts-night-soft);
  --surface:         #223140;
  --surface-warm:    #263646;
  --surface-raised:  #2a3b4c;
  --text:            #ece5d0;
  --text-soft:       #b9b49f;
  --heading:         #f6efdb;
  --accent:          #e8a15c;          /* Laternen-Bernstein */
  --accent-hover:    #f2b476;
  --accent-contrast: #201709;
  --line:            #35485c;
  --line-soft:       #2c3d4f;
  --gold:            #e0b264;
  --moss:            #8a9a7e;
  --focus:           #f2c885;
  --shadow:          0 2px 16px rgba(0, 0, 0, .4);
  --shadow-raised:   0 12px 38px rgba(0, 0, 0, .55);
  --nav-bg:          rgba(22, 34, 46, .92);
  --chip-bg:         #263646;
  --chip-active-bg:  #e8a15c;
  --chip-active-tx:  #201709;
  --map-glow:        0 0 60px rgba(232, 161, 92, .12);
  --status-existing:  #8bc07f;
  --status-planned:   #e0b264;
  --status-build:     #86b0e0;
  --status-idea:      #e8935e;
  color-scheme: dark;
}