/* nexograph.travel – Design Tokens v0.3 „Küste"
   Quelle der Wahrheit für Farben, Typografie, Abstände, Radien, Schatten.
   Regeln zur Verwendung: DESIGN.md

   ── Was sich gegenüber 0.2 geändert hat ──────────────────────────────────

   Das Leitbild war die Wanderkarte: Bergsee-Grün, Höhenlinien, Lärchengold.
   Es war stimmig, aber dunkel und kühl — und damit das Gegenteil dessen, was
   ein Reiseportal auslösen soll.

   Neu: Küste. Heller Himmel, Azur als Primärfarbe, Bernstein als warmer
   Akzent. Das folgt dem Muster, das die großen Portale gemeinsam haben —
   weiße Arbeitsflächen, ein freundliches Blau für Vertrauen und Navigation,
   eine warme Farbe für das, was Lust macht.

   GRÜN GIBT ES NOCH, aber nur als BEDEUTUNG: `--c-pine` kennzeichnet einen
   belegbaren Vorteil („kostenlos stornierbar bis 3 Tage vor Anreise"). Es ist
   keine Markenfarbe mehr und steht nie auf einer Fläche, einem Knopf oder
   einer Überschrift.

   Die NAMEN sind unverändert geblieben. `--c-lake` heißt weiter so, obwohl es
   kein Bergsee mehr ist, sondern das Meer — ein Umbenennen hätte jede Regel
   in app.css angefasst, ohne dass eine Farbe anders aussähe. Wer den Namen
   ändert, ändert ihn an beiden Stellen.

   Kontrast: Jedes Text-Hintergrund-Paar erfüllt WCAG 2.2 AA (4,5:1 für Text,
   3:1 für große Schrift und UI-Grenzen). Nachgemessen im Browser, nicht
   geschätzt. Neue Kombinationen vor dem Einsatz messen. */

:root {
  /* Farbe – Flächen */
  --c-paper: #F5F9FD;        /* Seitenhintergrund, Papierweiß mit Blaustich */
  --c-surface: #FFFFFF;      /* Panels, Zeilen, Formulare */
  --c-sunken: #E8F1FA;       /* Eingelassene Flächen, Umschalter-Hintergrund */
  --c-line: #D3E0EE;         /* Trennlinien und Panelrahmen — DEKORATIV */
  --c-control: #6F7C8C;      /* Rahmen von BEDIENELEMENTEN: Eingabe, Auswahl,
                                Chip, Umrissknopf. Getrennt von --c-line, weil
                                WCAG 2.2 fuer die Grenze eines Bedienelements
                                3:1 verlangt (1.4.11), fuer einen Trennstrich
                                aber nichts. Mit --c-line waeren es 1,34:1 —
                                gemessen, nicht geschaetzt. */
  --c-topo: #C3D8EA;         /* Höhenlinien im Hero */

  /* Farbe – Text */
  --c-ink: #10263F;          /* Tiefes Marine statt Schwarz */
  --c-ink-muted: #51647D;    /* Sekundärtext (AA auf paper und surface) */

  /* Farbe – Aktionen & Bedeutung */
  --c-lake: #0A5FC4;         /* Primär: Suchen, Navigieren, Auswahl */
  --c-lake-hover: #084B9C;
  --c-lake-soft: #E1EDFC;
  --c-on-lake: #FFFFFF;
  --c-marker: #C4382A;       /* NUR Buchungspfad: "Zahlungspflichtig buchen" */
  --c-marker-hover: #A32C1F;
  --c-on-marker: #FFFFFF;
  --c-pine: #15734B;         /* Belegbarer Vorteil — Bedeutung, keine Marke */
  --c-pine-soft: #DDF0E6;
  --c-warn: #855700;         /* Hinweise, Einschränkungen */
  --c-warn-soft: #FBEFD5;
  --c-focus: #6A3DE8;        /* Tastaturfokus — bewusst NICHT die Primärfarbe,
                                sonst verschwindet der Rahmen auf dem Knopf,
                                den er umrandet */

  /* Farbe – Himmel (Hero). Ein Verlauf, weil er Himmel darstellt; dekorative
     Verläufe auf Flächen oder Knöpfen bleiben verboten (DESIGN.md §4.4). */
  --c-sky: #CFE7F9;          /* oben, Horizontferne */
  --c-sky-2: #EAF4FC;        /* unten, geht in paper über */
  --c-ridge-far: #B3D2EC;    /* hinterer Höhenzug */
  --c-ridge-near: #86B9DF;   /* vorderer Höhenzug */

  /* Farbe – dunkle Orientierungsflächen: Fuß, Karte. NICHT mehr der Hero. */
  --c-night: #0D2744;        /* Tiefe Abendküste */
  --c-night-raised: #1A3A60; /* Flächen auf night (Landfläche der Karte) */
  --c-on-night: #EDF4FB;
  --c-on-night-muted: #A6BCD5;
  --c-topo-night: #22456B;
  --c-larch: #F0A32F;        /* Bernstein: Sonne, "erfüllt alle Wünsche" */
  --c-on-larch: #2A1B00;

  /* Merkmalskategorien – Farbe trägt Bedeutung, nie allein (immer mit Icon und Text) */
  --cat-water: #0E6BA4;      --cat-water-soft: #DCECF8;     /* Seezugang, Meerblick, Pool */
  --cat-mountain: #15734B;   --cat-mountain-soft: #DDF0E6;  /* Ski, Wandern */
  --cat-wellness: #A04D18;   --cat-wellness-soft: #FBE7D8;  /* Sauna, Kamin, Ruhe */
  --cat-culture: #86336E;    --cat-culture-soft: #F7E2F0;   /* Kultur */
  --cat-comfort: #755815;    --cat-comfort-soft: #F8EDD8;   /* Frühstück, Hund, Familie, Parken */

  /* Preis-Kalender (Heatmap, nie ohne Zahl im Feld) */
  --heat-1: #D7EFE1;
  --heat-2: #E7F3D5;
  --heat-3: #FBF1D3;
  --heat-4: #FBE0C7;
  --heat-5: #F8CABD;

  /* Typografie */
  --font-display: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8rem;     /* 13.6px */
  --fs-s: 0.9rem;      /* 15.3px */
  --fs-m: 1rem;        /* 17px Basis */
  --fs-l: 1.25rem;     /* 21.25px */
  --fs-xl: 1.563rem;   /* 26.6px */
  --fs-2xl: 1.953rem;  /* 33.2px */
  --fs-3xl: 2.441rem;  /* 41.5px */
  --fs-4xl: 3.052rem;  /* 51.9px */
  --lh-body: 1.55;
  --lh-tight: 1.1;

  /* Abstände (4-px-Raster) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* Radien – nach Hierarchie, nicht einheitlich */
  --r-s: 4px;      /* Eingaben, Chips, Kalenderfelder */
  --r-m: 10px;     /* Panels, Zeilen, Bilder */
  --r-l: 18px;     /* Suchpanel im Hero (einziges großes Element) */
  --r-pill: 999px; /* Umschalter, Kartenmarker */

  /* Elevation – nur für Überlagerungen (Popover, Tooltip) und das Suchpanel */
  --shadow-overlay: 0 14px 36px -14px rgba(13, 39, 68, 0.28);

  /* Layout */
  --w-content: 1320px;
  --w-text: 68ch;
  --bp-s: 760px;
  --bp-m: 1100px;
}

/* ── Dunkelmodus ───────────────────────────────────────────────────────────
   Gleichwertig, nicht nachrangig. Der Himmel wird zur blauen Stunde: er bleibt
   ein Verlauf und bleibt heller als die Seite, damit der Hero seine Rolle
   behält. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper: #0C1622; --c-surface: #142234; --c-sunken: #1B2C42; --c-line: #2A3D56; --c-control: #8095AE; --c-topo: #23354B;
    --c-ink: #E6EEF7; --c-ink-muted: #9FB2C7;
    --c-lake: #6FB2F5; --c-lake-hover: #93C7FA; --c-lake-soft: #16304C; --c-on-lake: #06182B;
    --c-marker: #F1705F; --c-marker-hover: #F58C7E; --c-on-marker: #240A06;
    --c-pine: #6FC79A; --c-pine-soft: #123326; --c-warn: #E6B45C; --c-warn-soft: #362A12;
    --c-focus: #A48CFF;
    --c-sky: #17304C; --c-sky-2: #101F31; --c-ridge-far: #1D3A58; --c-ridge-near: #2A5077;
    --c-night: #081422; --c-night-raised: #122740; --c-on-night: #E6EEF7; --c-on-night-muted: #9AB2CC;
    --c-topo-night: #16304C; --c-larch: #F5B65A; --c-on-larch: #2A1B00;
    --cat-water: #79B6E9; --cat-water-soft: #12314B; --cat-mountain: #6FC79A; --cat-mountain-soft: #123326;
    --cat-wellness: #EE9A63; --cat-wellness-soft: #3B2413; --cat-culture: #DE88C3; --cat-culture-soft: #38192F;
    --cat-comfort: #D7B45C; --cat-comfort-soft: #332A11;
    --heat-1: #17392A; --heat-2: #283B21; --heat-3: #3A371D; --heat-4: #432D1E; --heat-5: #4C2421;
    --shadow-overlay: 0 14px 36px -14px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  --c-paper: #0C1622; --c-surface: #142234; --c-sunken: #1B2C42; --c-line: #2A3D56; --c-control: #8095AE; --c-topo: #23354B;
  --c-ink: #E6EEF7; --c-ink-muted: #9FB2C7;
  --c-lake: #6FB2F5; --c-lake-hover: #93C7FA; --c-lake-soft: #16304C; --c-on-lake: #06182B;
  --c-marker: #F1705F; --c-marker-hover: #F58C7E; --c-on-marker: #240A06;
  --c-pine: #6FC79A; --c-pine-soft: #123326; --c-warn: #E6B45C; --c-warn-soft: #362A12;
  --c-focus: #A48CFF;
  --c-sky: #17304C; --c-sky-2: #101F31; --c-ridge-far: #1D3A58; --c-ridge-near: #2A5077;
  --c-night: #081422; --c-night-raised: #122740; --c-on-night: #E6EEF7; --c-on-night-muted: #9AB2CC;
  --c-topo-night: #16304C; --c-larch: #F5B65A; --c-on-larch: #2A1B00;
  --cat-water: #79B6E9; --cat-water-soft: #12314B; --cat-mountain: #6FC79A; --cat-mountain-soft: #123326;
  --cat-wellness: #EE9A63; --cat-wellness-soft: #3B2413; --cat-culture: #DE88C3; --cat-culture-soft: #38192F;
  --cat-comfort: #D7B45C; --cat-comfort-soft: #332A11;
  --heat-1: #17392A; --heat-2: #283B21; --heat-3: #3A371D; --heat-4: #432D1E; --heat-5: #4C2421;
  --shadow-overlay: 0 14px 36px -14px rgba(0, 0, 0, 0.7);
}