/* ==========================================================================
   hamstern.io · Design Tokens v2.0 (Oktober 2026)
   Ersetzt tokens.css v1.0 (Paper.design-Export, Navy/Slate) vollständig.
   Single Source of Truth für alle Farben, Schriften, Abstände.
   Nur helles Theme. Kein Dark Mode.
   ========================================================================== */

/* Schriften lokal hosten (keine Google-Fonts-Einbindung, DSGVO):
   Outfit 300, 500, 700, 800, 900 · Inter 400, 500, 600 · jeweils woff2, font-display: swap
   Dateien unter /assets/fonts/, @font-face in fonts.css */

:root {
  color-scheme: light;

  /* --- Neutrals (warm, leicht Richtung Gelb-Orange) --- */
  --bg:       #FFFBF5;   /* Seitenhintergrund */
  --surface:  #FFFFFF;   /* Karten, Boxen */
  --sunk:     #F8F1E6;   /* eingelassene Flächen, Platzhalter */
  --line:     #EFE4D2;   /* Linien, Rahmen */
  --ink:      #26211B;   /* Text primär, dunkle Flächen */
  --ink-2:    #5A5046;   /* Text sekundär · 7,6:1 auf --bg */
  --ink-3:    #6E6356;   /* Metatexte, Datum, Quellen · 5,7:1 auf --bg */
  --frame:    #E9E2D6;

  /* --- Marke --- */
  --brand:      #FFB23E; /* Gelb-Orange: Hero, Buttons, „Unsere Wahl" */
  --brand-deep: #F28C00; /* Ziffern, Fokusring */
  --brand-soft: #FFF1D9; /* Lagebild-Band, Ergebnisflächen */

  /* Hamsteralarm (Begleit-App, nach dem Launch): Blau mit derselben Sättigung (100 %) wie --brand,
     Farbton gegenüber dem Orange-Gelb. --brand bleibt als Kontrast-Akzent (Knöpfe, Hamish). */
  --alarm: #61B1FD;       /* Flächen, Hero, Hintergrund der Hamsteralarm-Bilder. Text --ink darauf 7,0:1 */
  --alarm-soft: #E2F0FF;  /* Kacheln, Icon-Flächen. Text --ink 13,8:1 */
  --alarm-deep: #1660B8;  /* Links, Icons, aktive Schalter auf hell. 6,0:1 auf --bg */
  --brand-ink:  #7A3F00; /* Eyebrows auf --brand · 4,6:1 */
  --avatar:     #FFF3B0; /* Hamish-Profilbild und Sprechblase */

  /* --- Themenwelten: Akzent (--t), Hero-Fläche (--h), Akzent auf Dunkel (--d) ---
     Itten-Tertiärfarben. --h ist so aufgehellt, dass --ink mind. 7:1 erreicht,
     --d so, dass es auf --ink mind. 7:1 erreicht. */
  --t-yo: #FFB23E;  --h-yo: #FFB23E;                                   --d-yo: #FFB23E;   /* Strom & Licht */
  --t-ro: #F2703F;  --h-ro: color-mix(in srgb, #F2703F 75%, #FFFBF5);  --d-ro: color-mix(in srgb, #F2703F 70%, #fff); /* Wärme & Energie */
  --t-rv: #C2508A;  --h-rv: color-mix(in srgb, #C2508A 55%, #FFFBF5);  --d-rv: color-mix(in srgb, #C2508A 50%, #fff); /* Erste Hilfe & Gesundheit */
  --t-bv: #6A64C8;  --h-bv: color-mix(in srgb, #6A64C8 55%, #FFFBF5);  --d-bv: color-mix(in srgb, #6A64C8 50%, #fff); /* Notgepäck & Dokumente */
  --t-bg: #26A69A;  --h-bg: color-mix(in srgb, #26A69A 75%, #FFFBF5);  --d-bg: color-mix(in srgb, #26A69A 70%, #fff); /* Wasser */
  --t-yg: #92C13E;  --h-yg: #92C13E;                                   --d-yg: #92C13E;   /* Vorrat & Kochen */
  /* Im Template pro Kategorie setzen:  style="--c:var(--t-xx); --h:var(--h-xx); --d:var(--d-xx)"
     Standard (keine Kategorie): Strom & Licht */
  --c: var(--t-yo);  --h: var(--h-yo);  --d: var(--d-yo);

  /* --- Badge-Familie Produktboxen (groß = Kopfzeile, kompakt = Pill) --- */
  --badge-top: var(--brand);                          /* Unsere Wahl */
  --badge-pl: #FBD3E4;  --badge-pl-ink: #8A2D58;       /* Preistipp */
  --badge-ag: #D3F2CB;  --badge-ag-ink: #2D6A27;       /* Auch gut */
  --badge-up: #D3E8FB;  --badge-up-ink: #1F4E7A;       /* Upgrade */

  /* --- Semantik --- */
  --pos: #2F7A4F;  --pos-soft: #E8F3E4;  --pos-strong: #5DBB46;  /* Häkchen, Fortschritt, Abschluss */
  --neg: #B23A3A;  --neg-soft: #FBE9E7;                           /* eignung_box „Für wen eher nicht" */

  /* --- Typografie --- */
  --f-display: "Outfit", "Avenir Next", "Segoe UI", sans-serif;   /* Überschriften 700–900, Logo 900 + 300 */
  --f-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Skala mobil → desktop (Desktop ab Container 900px)
     H1 Seite 32–48 · H1 Archiv/Werkzeug 38–72 · H2 Abschnitt 22–30 · H3 16–20
     Fließtext Artikel 17 → 18 / Lead 17 → 20 / Meta 11–12 / Eyebrow 11 uppercase +0.08em */

  /* --- Abstände: 8px-Raster --- */
  --space-1: 8px;  --space-2: 16px;  --space-3: 24px;  --space-4: 32px;
  --space-5: 40px; --space-6: 48px;  --space-8: 64px;  --space-10: 80px;
  --gut: 16px;                        /* Seitenrand mobil, immer mit max(…, env(safe-area-inset-*)) */

  /* --- Form --- */
  --r: 8px;  --r-lg: 14px;  --r-pill: 999px;
  --shadow-lift: 0 8px 24px rgba(38, 33, 27, .08);

  /* --- Layout --- */
  --content-max: 680px;  /* Lesespalte */
  --site-max: 1180px;
  --max: var(--site-max);   /* Alias, in der Homepage-Referenz verwendet */
  /* --wire (Strukturrahmen in den Referenzen) ist nur Vorschau-Werkzeug und gehört nicht ins Theme */
  --sidebar: 300px;
  /* Umbruch über Container Queries auf .page: 640px (2 Spalten Raster), 900px (Desktop) */
}