/* ═══════════════════════════════════════════════════════════
   REISEN — tokens.css (Slice 23)
   EINE kanonische Design-Token-Wahrheit fuer alle Seitentypen.
   Wird als ERSTES Stylesheet geladen (vor site.min.css,
   design-system.css, kompass.css, community*.css). Alle Werte
   aus den bisherigen :root-Bloecken konsolidiert — keine neuen
   Farben erfunden. Legacy-Blöcke bleiben als Alias-Quellen
   bestehen, muessen aber die Kanonwerte teilen (Guard prueft).

   EINSATZREGELN (verbindlich):
   - Primary (--primary, Teal): Markenfarbe, Header, Links,
     neutral-serioese Aktionen. NICHT fuer Warnungen.
   - Accent (--accent, Koralle): genau EIN Haupt-CTA pro
     Sichtbereich (Buchung/Partner), Preise, Highlights.
     Sparsam einsetzen — Seltenheit erzeugt Gewicht.
   - Neutrals: Flaechen, Text, Border. Farben nie ausserhalb
     dieser Skala erfinden; Statusfarben nur fuer Status.
   - Typo: Fraunces NUR fuer h1-h3/Display, DM Sans fuer alles
     andere. Keine dritte Familie, keine Mischung im Element.
   - Spacing: ausschliesslich 4/8px-Raster (--sp-1..9).
   - Radii: sm=Inputs/Badges, md=Buttons/Karten, lg=Sektionen,
     full=Pills. Genau ein Radius pro Komponententyp.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Farben: EINE Palette ─── */
  /* Primary (Teal) — Marke, Header, Links */
  --primary: #0d5c63;
  --primary-light: #14756e;
  --primary-dark: #084048;
  --text-on-primary: #ffffff;

  /* Accent (Koralle) — genau ein Haupt-CTA pro Sichtbereich */
  --accent: #c13e1d;
  --accent-light: #c95636;
  --accent-dark: #a03517;
  --text-on-accent: #ffffff;

  /* Neutralskala — Flaechen */
  --bg: #faf8f5;
  --bg-elevated: #ffffff;
  --bg-soft: #f3efe9;
  --bg-dark: #1a1f2e;
  --bg-dark-soft: #242b3d;

  /* Neutralskala — Text */
  --text: #1a1f2e;
  --text-body: #2d3548;
  --text-muted: #59616e;
  --text-on-dark: #f0ede8;
  --text-on-dark-muted: #b7bdc8;

  /* Neutralskala — Border */
  --border: #e5e0d8;
  --border-light: rgba(0, 0, 0, .08);
  --border-dark: rgba(255, 255, 255, .12);
  --muted-light: #f3f4f6;

  /* Status — nur fuer Statusaussagen */
  --success: #047857;
  --success-light: #d1fae5;
  --warning: #8a4b00;
  --warning-light: #fef3c7;


  /* --- Travel Joy v2 (Slice 40, Nutzer-Feedback 26.08.) ---
     Emotional-reise-romantische DEKO-Palette fuer Hero-Metaphern
     (Split-Flap-Tafel, Wolken, Sonne, Wellen). Vorgabe:
     bunt-freudlich-dynamisch bei handwerklicher Disziplin.
     Regeln:
     - nacht ist die EINZIGE tj-Farbe fuer Fliesstext.
       Sehr gutes Ratio auf Weiss, Sand und tint (AA erfuellt).
     - Alle anderen tj-Farben sind DEKO (Kacheln, Wolken, Sonne,
       Wellen) — nie fuer Fliesstext.
     - Ozean nur fuer Deko-Konturen, kein Text.
     - Keine tj-Farbe in Buttons (Accent-Koralle bleibt Kanon).
  */
  --tj-himmel: #7ec8e3;      /* Deko: Wellen, Himmelsakzent */
  --tj-himmel-tint: #d5eaf0; /* Flaeche: sanfte Skyline (Himmel 30 Prozent) */
  --tj-himmel-deep: #c2e2ed; /* Flaeche: Wellenkante (Himmel 45 Prozent) */
  --tj-ozean: #1b7fa8;       /* Deko: Konturen, nichts fuer Text */
  --tj-sunset: #ff7a59;      /* Deko: warme Sonnenkante */
  --tj-sonne: #ffc94d;       /* Deko: Sonnenflaeche */
  --tj-sand: #fff6e9;        /* Flaeche: sandiges Panel */
  --tj-nacht: #16324f;       /* TEXT + Tafel-Grund */
  --tj-tafel-text: #ffffff;  /* Text auf Tafel-Grund */
  --tj-fuge: rgba(255, 255, 255, .30);          /* Klappenfuge */
  --tj-kachel-glanz: rgba(255, 255, 255, .07);  /* Kachel-Glanz */
  --tj-wolke: rgba(126, 201, 228, .45);         /* Wolken-Fuellung */

  /* ─── Typo: max. 2 Familien, klare Hierarchie ─── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.75rem;    /* 12px — Labels, Badges, Meta */
  --fs-sm: 0.875rem;   /* 14px — Sekundaertext, Captions */
  --fs-base: 1rem;     /* 16px — Body */
  --fs-md: 1.125rem;   /* 18px — Lead-Absaetze */
  --fs-lg: 1.375rem;   /* 22px — Kartentitel, h4/h3 kompakt */
  --fs-xl: 1.75rem;    /* 28px — Sektionstitel, h3/h2 kompakt */
  --fs-2xl: clamp(2rem, 5vw, 3.5rem);   /* h2 gross, h1 */
  --fs-3xl: clamp(2.5rem, 6vw, 4.5rem); /* Display, Hero */

  /* ─── Spacing: 4/8px-Raster ─── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;

  /* ─── Radii: genau ein Stil pro Komponententyp ─── */
  --radius-sm: 8px;     /* Inputs, Badges */
  --radius-md: 12px;    /* Buttons, Karten */
  --radius-lg: 16px;    /* Sektionen, grosse Container */
  --radius-full: 999px; /* Pills */

  /* ─── Schatten ─── */
  --shadow-sm: 0 1px 2px rgba(26, 31, 46, .06);
  --shadow-md: 0 4px 12px rgba(26, 31, 46, .08);
  --shadow-lg: 0 12px 32px rgba(26, 31, 46, .12);
  --shadow-xl: 0 24px 64px rgba(26, 31, 46, .16);

  /* ─── Motion ─── */
  --dur-fast: .15s;
  --dur: .3s;
  --dur-slow: .5s;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ─── Layout ─── */
  --container: 1200px;
  --container-narrow: 720px;
  --container-wide: 1400px;

  /* ─── Z-Index ─── */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* ─── Responsive Spacing-Override (mobil) ───
   Kanonische Reduktion der Sektionsabstaende unter 768px;
   identisch zu den bisherigen Legacy-Media-Overrides. */
@media (max-width: 768px) {
  :root {
    --sp-7: 36px;
    --sp-8: 48px;
    --sp-9: 64px;
  }
}