/* Design-Tokens. Einzige Datei mit Farbwerten.
   Ebene 1: Paletten pro Theme (--palette-*), gesetzt über data-theme auf <html>.
   Ebene 2: semantische Tokens (--color-*, --surface-*, --scene-*). Komponenten nutzen nur Ebene 2.
   Kontrast: scripts/contrast.mjs, Ergebnisse im Stilbuch. Mapping auf theme.json: DESIGN.md. */

/* ------------------------------------------------------------------
   Ebene 1: Paletten
   ------------------------------------------------------------------ */

/* Platzgrün (Default). Rasen und Trainingsplatz. Das Altseiten-Grün #8db345
   lebt als --palette-primary-300 weiter, nur für Flächen, nie für Text. */
:root,
[data-theme="platzgruen"] {
  --palette-primary-900: #12301c;
  --palette-primary-800: #1c4428;
  --palette-primary-700: #245a33;
  --palette-primary-600: #2e6e3e;
  --palette-primary-500: #4b8a3c;
  --palette-primary-300: #8db345;
  --palette-primary-100: #e4eed6;

  --palette-accent-700: #6e4b0b;
  --palette-accent-500: #c08a26;
  --palette-accent-300: #e8c879;
  --palette-accent-100: #f6ecd4;

  --palette-neutral-950: #16201a;
  --palette-neutral-800: #2b382f;
  --palette-neutral-600: #46544a;
  --palette-neutral-400: #87958a;
  --palette-neutral-200: #d3dbcc;
  --palette-neutral-100: #eaeee3;
  --palette-neutral-50: #f8faf4;

  /* Glas: Kanäle für rgb(... / alpha). Getöntes Glas in sattem Dunkelgrün, dasselbe Grün trägt in Flutlicht die Scheiben. */
  --palette-glass: 248 250 243;
  --palette-glass-strong: 4 46 27;

  /* Szene: Himmel oben, Hügel von hinten (1) nach vorn (3) */
  --palette-scene-sky: #eaf1dc;
  --palette-scene-haze: #f8f7e8;
  --palette-scene-hill-1: #cfe0b2;
  --palette-scene-hill-2: #aac884;
  --palette-scene-hill-3: #84ab5a;
  --palette-scene-light: #fff9dc;
}

/* Vereinsblau. Die cyanblauen Polos, dazu das Orange vom Banner „Tag des Hundes“, beide entschärft. */
[data-theme="vereinsblau"] {
  --palette-primary-900: #0a2a3b;
  --palette-primary-800: #0e3c55;
  --palette-primary-700: #124f6f;
  --palette-primary-600: #186487;
  --palette-primary-500: #2683ab;
  --palette-primary-300: #7cc2dc;
  --palette-primary-100: #ddf0f6;

  --palette-accent-700: #8a3f0c;
  --palette-accent-500: #e0761c;
  --palette-accent-300: #f6b77c;
  --palette-accent-100: #fce9d8;

  --palette-neutral-950: #122029;
  --palette-neutral-800: #263843;
  --palette-neutral-600: #44555f;
  --palette-neutral-400: #8696a0;
  --palette-neutral-200: #d1dce2;
  --palette-neutral-100: #e8eff2;
  --palette-neutral-50: #f6f9fb;

  --palette-glass: 247 250 252;
  --palette-glass-strong: 12 52 74;

  --palette-scene-sky: #e2eff5;
  --palette-scene-haze: #f6f4ec;
  --palette-scene-hill-1: #c3dfe8;
  --palette-scene-hill-2: #97c7d8;
  --palette-scene-hill-3: #66a9c1;
  --palette-scene-light: #fff3e2;
}

/* Wappenrot. Rot und Gold des Gemeindewappens auf warmem Neutral. */
[data-theme="wappenrot"] {
  --palette-primary-900: #3c0b11;
  --palette-primary-800: #5a111b;
  --palette-primary-700: #781823;
  --palette-primary-600: #94202d;
  --palette-primary-500: #b5333d;
  --palette-primary-300: #e19088;
  --palette-primary-100: #f7e2de;

  --palette-accent-700: #6f4f06;
  --palette-accent-500: #d7a21f;
  --palette-accent-300: #efd27c;
  --palette-accent-100: #faf0d2;

  --palette-neutral-950: #221a17;
  --palette-neutral-800: #3a2f2a;
  --palette-neutral-600: #594c45;
  --palette-neutral-400: #998b82;
  --palette-neutral-200: #e1d6cc;
  --palette-neutral-100: #f0e9e1;
  --palette-neutral-50: #fbf8f3;

  --palette-glass: 252 249 244;
  --palette-glass-strong: 86 17 27;

  --palette-scene-sky: #f5ece3;
  --palette-scene-haze: #fbf6ec;
  --palette-scene-hill-1: #ecd6c4;
  --palette-scene-hill-2: #dfbaa1;
  --palette-scene-hill-3: #c9967c;
  --palette-scene-light: #fff5df;
}

/* Erde. Leder, Leine, Hundeplatz im Herbst. Ruhiges Braun mit Teal als Gegenpol. */
[data-theme="erde"] {
  --palette-primary-900: #2a1c11;
  --palette-primary-800: #3e2a19;
  --palette-primary-700: #553a23;
  --palette-primary-600: #6c4b2e;
  --palette-primary-500: #8c6945;
  --palette-primary-300: #c9a67c;
  --palette-primary-100: #f1e6d8;

  --palette-accent-700: #175855;
  --palette-accent-500: #2b8781;
  --palette-accent-300: #8bc6bf;
  --palette-accent-100: #ddefec;

  --palette-neutral-950: #211b15;
  --palette-neutral-800: #3b322a;
  --palette-neutral-600: #5b5148;
  --palette-neutral-400: #9b9086;
  --palette-neutral-200: #e0d8cd;
  --palette-neutral-100: #efe9e0;
  --palette-neutral-50: #faf7f1;

  --palette-glass: 251 248 242;
  --palette-glass-strong: 62 42 25;

  --palette-scene-sky: #f2ebdf;
  --palette-scene-haze: #f9f5ec;
  --palette-scene-hill-1: #e2d3bb;
  --palette-scene-hill-2: #cdb690;
  --palette-scene-hill-3: #b0946b;
  --palette-scene-light: #fff8ea;
}

/* Dämmerung. Dunkle Variante mit dunklem, grün getöntem Glas. */
[data-theme="daemmerung"] {
  --palette-primary-900: #0c1d15;
  --palette-primary-800: #133024;
  --palette-primary-700: #1b4332;
  --palette-primary-600: #285e46;
  --palette-primary-500: #5fb27e;
  --palette-primary-300: #9ed3ad;
  --palette-primary-100: #dcf1e2;

  --palette-accent-700: #8a6418;
  --palette-accent-500: #d9a441;
  --palette-accent-300: #f0c977;
  --palette-accent-100: #faefd6;

  /* In den dunklen Themes ist neutral-950 die hellste Stufe: Text bleibt Text, Fläche bleibt Fläche. */
  --palette-neutral-950: #eef3ee;
  --palette-neutral-800: #d3ddd6;
  --palette-neutral-600: #c2cfc6;
  --palette-neutral-400: #74857b;
  --palette-neutral-200: #2f3f37;
  --palette-neutral-100: #1d2a24;
  --palette-neutral-50: #131d19;

  --palette-glass: 13 33 25;
  --palette-glass-strong: 28 80 56;

  --palette-scene-sky: #0e1a1b;
  --palette-scene-haze: #1c2c2b;
  --palette-scene-hill-1: #1a2f2b;
  --palette-scene-hill-2: #1f3b32;
  --palette-scene-hill-3: #26483a;
  --palette-scene-light: #3e5a49;
}

/* Flutlicht. Der Platz am Abend, dunkles Gegenstück zu Platzgrün: die Scheiben tragen dessen sattes Dunkelgrün
   (getöntes Glas in Platzgrün), das getönte Glas (Abschlussbox, Footer) wird hell mit dunkelgrüner Schrift. Gold bleibt der Akzent. */
[data-theme="flutlicht"] {
  --palette-primary-900: #062417;
  --palette-primary-800: #0b3322;
  --palette-primary-700: #11472f;
  --palette-primary-600: #17603f;
  --palette-primary-500: #2a8a5a;
  --palette-primary-300: #a6e6bb;
  --palette-primary-100: #e3f7e9;

  --palette-accent-700: #8a6418;
  --palette-accent-500: #e3b04a;
  --palette-accent-300: #f5d384;
  --palette-accent-100: #fbf0d6;

  --palette-neutral-950: #f4faf5;
  --palette-neutral-800: #dbe9df;
  --palette-neutral-600: #c6e0ce;
  --palette-neutral-400: #7fa08a;
  --palette-neutral-200: #2c5a42;
  --palette-neutral-100: #164330;
  --palette-neutral-50: #0a2418;

  --palette-glass: 4 46 27;
  --palette-glass-strong: 238 246 240;

  --palette-scene-sky: #0a1f16;
  --palette-scene-haze: #10301f;
  --palette-scene-hill-1: #134026;
  --palette-scene-hill-2: #17502e;
  --palette-scene-hill-3: #1c6036;
  --palette-scene-light: #2f7a4a;
}

/* ------------------------------------------------------------------
   Ebene 2: semantische Tokens
   Auch auf jedem [data-theme]-Element, damit das Stilbuch Themes nebeneinander zeigen kann.
   ------------------------------------------------------------------ */

:root,
[data-theme] {
  /* Marke */
  --color-primary: var(--palette-primary-700);
  --color-primary-strong: var(--palette-primary-800);
  --color-on-primary: var(--palette-neutral-50);
  --color-primary-soft: var(--palette-primary-100);
  --color-accent: var(--palette-accent-500);
  --color-accent-text: var(--palette-accent-700);
  --color-accent-soft: var(--palette-accent-100);

  /* Text auf hellem Glas */
  --color-text: var(--palette-neutral-950);
  --color-text-muted: var(--palette-neutral-600);
  --color-heading: var(--palette-primary-800);
  --color-link: var(--palette-primary-700);
  --color-link-hover: var(--palette-primary-900);
  --color-focus: var(--palette-primary-700);
  --color-focus-halo: var(--palette-neutral-50);
  --color-rule: rgb(var(--palette-glass-strong) / 0.16);

  /* Glas */
  /* Deckkraft des Glases. Über dem Foto (Blätter) dichter, weil dort sehr dunkle Stellen liegen. */
  --glass-alpha: 0.5;
  --glass-alpha-photo: 0.5;
  --glass-strong-alpha: 0.72;
  --surface-glass: rgb(var(--palette-glass) / var(--glass-alpha));
  --surface-glass-strong: rgb(var(--palette-glass-strong) / var(--glass-strong-alpha));
  --surface-glass-solid: rgb(var(--palette-glass));
  --surface-glass-strong-solid: rgb(var(--palette-glass-strong));
  --surface-inset: rgb(var(--palette-glass-strong) / 0.06);
  --surface-card: rgb(255 255 255 / 0.4);
  /* Acryl-Prinzip: Hintergrund unter dem Glas wird weichgezeichnet und im Kontrast gestaucht.
     So bleiben Konturen des Bildes sichtbar, dunkle oder helle Stellen können den Text aber nicht schlucken.
     contrast() und brightness() rechnet scripts/contrast.mjs genauso nach (sRGB, wie Chromium). */
  --glass-blur: 10px;
  --glass-saturate: 1.5;
  --glass-contrast: 0.4;
  --glass-brightness: 1.5;
  --glass-strong-contrast: 0.55;
  --glass-strong-brightness: 0.7;
  --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
  --glass-strong-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-strong-contrast)) brightness(var(--glass-strong-brightness));
  --glass-border-top: rgb(255 255 255 / 0.9);
  --glass-border-bottom: rgb(255 255 255 / 0.25);
  --glass-shadow: 0 1px 2px rgb(var(--palette-glass-strong) / 0.08), 0 18px 48px rgb(var(--palette-glass-strong) / 0.16);

  /* Text auf getöntem Glas (.glass--strong). Wird dort auf --color-* umgelegt. */
  --on-strong-text: var(--palette-neutral-50);
  --on-strong-muted: var(--palette-primary-100);
  --on-strong-link: var(--palette-accent-300);
  --on-strong-accent: var(--palette-accent-300);
  --on-strong-focus: var(--palette-accent-300);
  --on-strong-rule: rgb(255 255 255 / 0.2);
  --on-strong-inset: rgb(255 255 255 / 0.08);
  --on-strong-soft: rgb(255 255 255 / 0.14);
  --on-strong-border-top: rgb(255 255 255 / 0.4);
  --on-strong-border-bottom: rgb(255 255 255 / 0.06);

  /* Formular: deckend, nicht Glas */
  --surface-field: #ffffff;
  --color-field-text: var(--palette-neutral-950);
  --color-field-border: var(--palette-neutral-600);
  --color-field-border-hover: var(--palette-neutral-950);
  --surface-field-disabled: var(--palette-neutral-100);
  --color-field-disabled: var(--palette-neutral-600);

  /* Status, themeübergreifend gleich, damit Fehler immer gleich aussehen */
  --color-success: #1a5f2f;
  --color-warning: #704300;
  --color-danger: #981a23;
  --color-info: #1b5078;
  --surface-success: #e3f2e6;
  --surface-warning: #fbefd9;
  --surface-danger: #fbe5e5;
  --surface-info: #e2eef7;

  /* Szene */
  --scene-sky: var(--palette-scene-sky);
  --scene-haze: var(--palette-scene-haze);
  --scene-hill-1: var(--palette-scene-hill-1);
  --scene-hill-2: var(--palette-scene-hill-2);
  --scene-hill-3: var(--palette-scene-hill-3);
  --scene-light: var(--palette-scene-light);
  --scene-tint: rgb(var(--palette-glass) / 0.2);
  --scene-trail: rgb(var(--palette-glass-strong) / 0.14);

  /* Anfahrtskarte: Wasser bleibt in jedem Theme blau, damit man es als Wasser liest */
  --map-ground: var(--surface-glass-solid);
  --map-water: #b7d3e6;
  --map-water-text: #2c5b7c;
  --map-road-main: #ffffff;
  --map-road-major: var(--palette-accent-100);

  /* Logo */
  --logo-color: var(--palette-primary-800);
  --logo-gold: var(--palette-accent-500);
  --logo-accent: var(--palette-accent-700);

  /* Schrift */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* Skala ca. 1,2 (mobil) bis 1,25 (Desktop), fluid. Fließtext 18–19 px: Source Sans 3 läuft kleiner als Atkinson. */
  --fs-xs: 0.9375rem;
  --fs-sm: clamp(1rem, 0.98rem + 0.08vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.1rem + 0.12vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.18rem + 0.3vw, 1.4rem);
  --fs-xl: clamp(1.5rem, 1.38rem + 0.55vw, 1.75rem);
  --fs-2xl: clamp(1.8rem, 1.6rem + 1vw, 2.25rem);
  --fs-3xl: clamp(2.15rem, 1.8rem + 1.7vw, 2.8rem);
  --fs-4xl: clamp(2.5rem, 1.95rem + 2.8vw, 3.6rem);

  --lh-body: 1.6;
  --lh-snug: 1.3;
  --lh-tight: 1.12;

  /* 4er-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;
  --space-9: 6rem;

  --gutter: 1rem;
  --section-gap: clamp(var(--space-4), 2.5vw, var(--space-6));
  --content: 72rem;
  --measure: 65ch;
  --header-h: 4.5rem;

  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-l: 1rem;
  --radius-pill: 999px;

  --tap: 44px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
  }
}

html[data-scene="blaetter"],
html[data-scene="blaetter"] [data-theme],
html[data-scene="foto"],
html:not([data-scene]),
html[data-scene="foto"] [data-theme] {
  --glass-alpha: var(--glass-alpha-photo);
}

/* Platzgrün: getöntes Glas dichter und stärker abgedunkelt, sonst bleicht das helle Foto das satte Dunkelgrün aus. */
html:not([data-theme]),
[data-theme="platzgruen"] {
  --glass-strong-alpha: 0.84;
  --glass-strong-brightness: 0.45;
}

/* Dunkle Themes legen die Semantik um: helle Schrift auf dunklem Glas.
   Tönungen sind durchscheinend statt deckend dunkel, damit Chips und Platzhalter nicht wie Löcher wirken. */
[data-theme="daemmerung"],
[data-theme="flutlicht"] {
  /* Klares Mittelgrün statt Pastell: hebt sich vom Glas ab, ohne als heller Block herauszufallen */
  --color-primary: var(--palette-primary-500);
  --color-primary-strong: #78c393;
  --color-on-primary: var(--palette-primary-900);
  --color-primary-soft: rgb(158 211 173 / 0.14);
  --color-accent: var(--palette-accent-500);
  --color-accent-text: var(--palette-accent-300);
  --color-accent-soft: rgb(217 164 65 / 0.09);

  --color-text: var(--palette-neutral-950);
  --color-text-muted: var(--palette-neutral-600);
  --color-heading: var(--palette-primary-100);
  --color-link: var(--palette-primary-300);
  --color-link-hover: var(--palette-primary-100);
  --color-focus: var(--palette-accent-300);
  --color-focus-halo: var(--palette-neutral-50);
  --color-rule: rgb(220 241 226 / 0.14);

  --glass-alpha: 0.5;
  --glass-alpha-photo: 0.5;
  --glass-strong-alpha: 0.72;
  /* Dunkles Glas: Hintergrund deutlich abdunkeln, sonst zieht das gestauchte Foto die Scheibe ins Graue */
  --glass-brightness: 0.5;
  --surface-inset: rgb(220 241 226 / 0.06);
  --map-water: #1e3a4c;
  --map-water-text: #93bedb;
  --map-road-main: rgb(255 255 255 / 0.32);
  --map-road-major: rgb(217 164 65 / 0.45);
  --surface-card: rgb(220 241 226 / 0.05);
  --glass-border-top: rgb(220 241 226 / 0.26);
  --glass-border-bottom: rgb(220 241 226 / 0.05);
  --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 48px rgb(0 0 0 / 0.4);

  --on-strong-text: #f3f8f4;
  --on-strong-muted: var(--palette-primary-100);
  --on-strong-link: var(--palette-accent-300);
  --on-strong-accent: var(--palette-accent-300);
  --on-strong-focus: var(--palette-accent-300);

  --surface-field: #0c1a14;
  --color-field-text: var(--palette-neutral-950);
  --color-field-border: var(--palette-neutral-600);
  --color-field-border-hover: var(--palette-neutral-950);
  --surface-field-disabled: var(--palette-neutral-100);
  --color-field-disabled: var(--palette-neutral-600);

  --color-success: #8fd6a0;
  --color-warning: #f2c46b;
  --color-danger: #ffa4a4;
  --color-info: #93c8ef;
  --surface-success: #15301f;
  --surface-warning: #33270f;
  --surface-danger: #3a1719;
  --surface-info: #132a3b;

  --scene-tint: rgb(0 0 0 / 0.1);
  --scene-trail: rgb(255 255 255 / 0.08);

  --logo-color: var(--palette-primary-100);
  --logo-gold: var(--palette-accent-300);
  --logo-accent: var(--palette-accent-300);

  color-scheme: dark;
}

/* Flutlicht: Scheiben so durchscheinend wie in den anderen Themes (50 %). Damit das Foto das Dunkelgrün nicht ins Graue zieht,
   dunkelt der Filter den Hintergrund stärker ab als in Dämmerung. Tönungen sind grün statt weiß, sonst wirken Chips grau.
   Auf dunkelgrünem Glas wäre ein grüner Button unsichtbar, deshalb hell wie der Button im getönten Glas von Platzgrün.
   Das getönte Glas ist hier hell: Filter hellt auf, Text und Details darauf sind dunkel. */
[data-theme="flutlicht"] {
  --glass-alpha: 0.5;
  --glass-alpha-photo: 0.5;
  --glass-brightness: 0.35;
  --glass-strong-alpha: 0.64;
  --glass-strong-contrast: 0.4;
  --glass-strong-brightness: 1.5;

  --color-primary: #f3f8f4;
  --color-primary-strong: #cfe6d6;
  --color-on-primary: #063a1f;
  --color-primary-soft: rgb(166 230 187 / 0.14);
  --color-accent-soft: rgb(245 211 132 / 0.1);
  --color-rule: rgb(227 247 233 / 0.16);
  --surface-inset: rgb(227 247 233 / 0.07);
  --surface-card: rgb(227 247 233 / 0.06);
  --glass-border-top: rgb(227 247 233 / 0.26);
  --glass-border-bottom: rgb(227 247 233 / 0.05);
  --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 48px rgb(0 20 10 / 0.45);

  --on-strong-text: #063a1f;
  --on-strong-muted: #3a5646;
  --on-strong-link: #042e1b;
  --on-strong-accent: #6e4b0b;
  --on-strong-focus: #042e1b;
  --on-strong-rule: rgb(4 46 27 / 0.18);
  --on-strong-inset: rgb(4 46 27 / 0.06);
  --on-strong-soft: rgb(4 46 27 / 0.1);
  --on-strong-border-top: rgb(255 255 255 / 0.9);
  --on-strong-border-bottom: rgb(255 255 255 / 0.25);

  --surface-field: #04230f;
  --map-water: #1b4157;
  --map-road-major: rgb(245 211 132 / 0.5);
}