/* tokens.css — Landbummel Design Tokens (Single Source of Truth)
 * v0.1.0 — 2026-05-25
 *
 * REGEL: Hex-Werte sind AUSSCHLIESSLICH in dieser Datei erlaubt.
 * Überall sonst (main.css, components.css, Templates, JS) nur var(--*).
 * Quelle: docs/MANIFEST.md.
 */

:root {
  /* ─── Farben ────────────────────────────────────────────────── */
  --c-navy:         #1B3F6B;
  --c-navy-dark:    #112A4A;
  --c-lime:         #89CC00;
  --c-lime-dark:    #6FA300;
  --c-lime-light:   #EEF9CC;
  --c-yellow:       #F5C300;
  --c-yellow-light: #FFFBE8;
  --c-bg:           #F2F6EE;
  --c-surface:      #FFFFFF;
  --c-border:       #DDE8D5;
  --c-text:         #131F2E;
  --c-muted:        #5A6B72;
  --c-light:        #96A8B8;
  --c-white:        #FFFFFF;
  --c-weather-sunny-text: #6B3A00;

  /* Semantisch (oklch) */
  --c-success:      oklch(0.62 0.14 148);
  --c-success-bg:   oklch(0.95 0.05 148);
  --c-warning:      oklch(0.55 0.13 75);
  --c-warning-bg:   oklch(0.97 0.06 75);
  --c-error:        oklch(0.50 0.14 25);
  --c-error-bg:     oklch(0.97 0.04 25);
  --c-info:         oklch(0.42 0.10 240);
  --c-info-bg:      oklch(0.95 0.04 240);

  /* Kategorie-Gradients */
  --g-cat-ausflug:           linear-gradient(135deg, #1B3F6B, #2A6AB0);
  --g-cat-natur:             linear-gradient(135deg, #1A4A1A, #2D7A2D);
  --g-cat-restaurant:        linear-gradient(135deg, #6B2A1B, #A04A2A);
  --g-cat-hotel:             linear-gradient(135deg, #1B3F6B, #3A6B9A);
  --g-cat-cafe:              linear-gradient(135deg, #4A2A0A, #8A5A2A);
  --g-cat-kinder:            linear-gradient(135deg, #1A5A2A, #4A9A2A);
  --g-cat-indoor:            linear-gradient(135deg, #2A2A4A, #4A4A7A);
  --g-cat-sehenswuerdigkeit: linear-gradient(135deg, #4A1A3A, #7A3A6A);

  /* Wetter-Gradients */
  --g-weather-sunny:  linear-gradient(90deg, #F5C300 0%, #F9A200 100%);
  --g-weather-cloudy: linear-gradient(90deg, #7A9AB5 0%, #5A7A95 100%);
  /* Phase 19c/2026-05-31: heller als Hero-Navy (#1B3F6B), damit der
     Banner sich visuell vom Hero abhebt. Slate-Blau mit Petrol-Stich. */
  --g-weather-rainy:  linear-gradient(90deg, #4A7896 0%, #3A6481 100%);
  --g-weather-snowy:  linear-gradient(90deg, #B8C4D6 0%, #94A4BC 100%);
  --g-weather-storm:  linear-gradient(90deg, #4A4458 0%, #322C3F 100%);
  --g-season-spring:  linear-gradient(90deg, #8DC63F 0%, #6FA300 100%);
  --g-season-summer:  linear-gradient(90deg, #F5C300 0%, #F08A00 100%);
  --g-season-autumn:  linear-gradient(90deg, #D87A00 0%, #8B3A00 100%);
  --g-season-winter:  linear-gradient(90deg, #5A7A95 0%, #2A4A6B 100%);

  /* Hero-BG (Navy mit dezentem Pattern) */
  --c-hero-bg: #1B3F6B;

  /* ─── Overlay-Farben (Phase 18 Audit-Fix B4) ────────────────────
   * Transparente Schichten — vorher inline rgba() in components.css.
   * Hex-Werte sind erlaubt, da Tokens. */
  --c-overlay-backdrop:   rgba(0, 0, 0, 0.45);  /* Modal/Drawer-Backdrop */
  --c-overlay-dark-12:    rgba(0, 0, 0, 0.12);
  --c-overlay-dark-18:    rgba(0, 0, 0, 0.18);

  --c-overlay-white-04:   rgba(255, 255, 255, 0.04);
  --c-overlay-white-06:   rgba(255, 255, 255, 0.06);
  --c-overlay-white-10:   rgba(255, 255, 255, 0.10);
  --c-overlay-white-18:   rgba(255, 255, 255, 0.18);
  --c-overlay-white-25:   rgba(255, 255, 255, 0.25);
  --c-overlay-white-30:   rgba(255, 255, 255, 0.30);
  --c-overlay-white-32:   rgba(255, 255, 255, 0.32);
  --c-overlay-white-40:   rgba(255, 255, 255, 0.40);
  --c-overlay-white-55:   rgba(255, 255, 255, 0.55);
  --c-overlay-white-78:   rgba(255, 255, 255, 0.78);
  --c-overlay-white-85:   rgba(255, 255, 255, 0.85);

  --c-overlay-lime-06:    rgba(141, 198, 63, 0.06);
  --c-overlay-lime-18:    rgba(141, 198, 63, 0.18);
  --c-overlay-lime-35:    rgba(141, 198, 63, 0.35);

  /* Weitere White-Overlays */
  --c-overlay-white-03:   rgba(255, 255, 255, 0.03);
  --c-overlay-white-08:   rgba(255, 255, 255, 0.08);
  --c-overlay-white-09:   rgba(255, 255, 255, 0.09);
  --c-overlay-white-13:   rgba(255, 255, 255, 0.13);
  --c-overlay-white-65:   rgba(255, 255, 255, 0.65);
  --c-overlay-white-70:   rgba(255, 255, 255, 0.70);
  --c-overlay-white-92:   rgba(255, 255, 255, 0.92);

  /* Navy-Overlay (Hero-Detail-Gradient + Modal-Backdrop) */
  --c-overlay-navy-10:    rgba(17, 42, 74, 0.10);
  --c-overlay-navy-20:    rgba(17, 42, 74, 0.20);
  --c-overlay-navy-55:    rgba(17, 42, 74, 0.55);
  --c-overlay-navy-78:    rgba(17, 42, 74, 0.78);

  /* Schatten-Overlay (Text-Shadow + Gallery-Credit) */
  --c-overlay-dark-25:    rgba(0, 0, 0, 0.25);

  /* Akzent für Region-Block-Filter-Pills (purple, eigener Akzent) */
  --c-accent-purple-bg:   rgba(127, 90, 240, 0.15);
  --c-accent-purple-text: rgb(74, 50, 160);

  /* Text-Color als Overlay (Gallery-Credit-Hintergrund) */
  --c-overlay-text-78:    rgba(19, 31, 46, 0.78);

  /* Badge-Tints (Indoor/Outdoor) */
  --c-overlay-navy-soft:  rgba(27, 63, 107, 0.10);   /* Indoor-Badge */
  --c-overlay-lime-dark-soft: rgba(111, 163, 0, 0.15); /* Outdoor-Badge */

  /* ─── Typografie ────────────────────────────────────────────── */
  --font:      'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: 3rem;       /* 48px */
  --fs-h1:      2.25rem;    /* 36px */
  --fs-h2:      1.625rem;   /* 26px */
  --fs-h3:      1.25rem;    /* 20px */
  --fs-h4:      1.0625rem;  /* 17px */
  --fs-h5:      0.875rem;   /* 14px */
  --fs-body-l:  1.125rem;   /* 18px */
  --fs-body:    0.9375rem;  /* 15px */
  --fs-body-s:  0.8125rem;  /* 13px */
  --fs-tag:     0.6875rem;  /* 11px */
  --fs-mono:    0.6875rem;  /* 11px */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.55;
  --lh-loose:  1.7;

  --ls-tight: -0.03em;
  --ls-tag:    0.05em;
  --ls-tag-lg: 0.08em;

  /* ─── Spacing ──────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  52px;
  --sp-10: 64px;
  --sp-11: 80px;

  /* ─── Radien ───────────────────────────────────────────────── */
  --r-xs:   5px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-2xl:  14px;
  --r-3xl:  16px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* ─── Schatten ─────────────────────────────────────────────── */
  --sh-sm:         0 1px 4px rgba(0, 0, 0, 0.10);
  --sh-md:         0 2px 6px rgba(0, 0, 0, 0.06);
  --sh-lg:         0 4px 32px rgba(0, 0, 0, 0.20);
  --sh-card-hover: 0 12px 32px rgba(0, 0, 0, 0.13);
  --sh-tile-hover: 0 8px 24px rgba(27, 63, 107, 0.14);
  --sh-pin:        0 2px 6px rgba(0, 0, 0, 0.20);
  --sh-focus:      0 0 0 3px rgba(111, 163, 0, 0.35);

  /* ─── Layout / Breakpoints ─────────────────────────────────── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;
  --container-max: 1200px;
  --nav-h: 64px;

  /* ─── Transitions ──────────────────────────────────────────── */
  --tr-fast: 150ms ease;
  --tr-base: 180ms ease;
  --tr-slow: 250ms ease;

  /* ─── Z-Index ──────────────────────────────────────────────── */
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  800;
  --z-modal:    900;
  --z-toast:    1000;
}