/* VEREO Design Tokens
   Source of truth: Standard Store Profil/Style-Tokens.json v2.0 (2026-05-25)
   Tier 1 = Vereo Core (locked, do not override per store)
   Tier 2 = Store-Brand (overridable via inline style or data-attributes on root element) */

:root {
  /* === Tier 1 · Vereo Core Colors (locked) === */
  --bg-app: #F3F3F1;            /* App background (cremiges Off-White) */
  --bg-card: #FFFFFF;            /* Cards, sticky bars */
  --surface: #F7F7F5;            /* Subtle highlights */
  --surface-soft: #FAF8F5;       /* Hover/secondary */
  --text: #0F0F0F;               /* Primary text */
  --text-soft: #5C5C5C;          /* Secondary text */
  --text-muted: #6F6F6F;         /* Muted text, 30.08.2026 von #9A9A9A angehoben: der alte
                                    Wert lag bei 2,53:1 auf --bg-app und 2,81:1 auf --bg-card,
                                    verlangt sind 4,5:1. Betraf u. a. 439 Marken-Labels in
                                    Produktkarten. #6F6F6F besteht auf beiden Untergruenden. */
  --border: #ECECEC;             /* Hairlines, dividers */
  --vereo-accent: #7F1D1D;       /* Bordeaux, VEREO-Logo + aktive Herzen (Merken/Folgen, Diego 12.07.) */

  /* === Tier 1 · Typography (VEREO CI: Archivo Black Headlines + Montserrat Body) === */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === Tier 1 · Spacing & Layout (4-px Grid) === */
  --grid: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.08);

  /* === Tier 1 · Layout Constraints === */
  --content-max-width: 480px;          /* App-Frame max on desktop */
  --tap-target-min: 48px;
  --hero-height: 280px;                /* Curiosity-Layout enforced */
  --bottom-nav-height: 64px;

  /* === Tier 1 · Typography Sizes === */
  --fs-2xs: 10px;   /* D-1 (Diego 18.07.): 10px war inoffizieller Standard (~500 Stellen), 
                       jetzt kleinste OFFIZIELLE Stufe. Nur für Eyebrows/Tags/Nav-Labels;
                       darunter gibt es nichts. */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 14px;    /* Entscheidung 44 (30.08.): Skala = 34/20/14/12/11/10. 15px abgebaut,
                       Alias auf die 14er-Stufe; Neubau nutzt --fs-base. */
  --fs-lg: 20px;    /* Entscheidung 44: 17px abgebaut, Alias auf die Titel-Stufe 20
                       (wie .section-head h2 und der Store-h1); Neubau nutzt --fs-xl. */
  --fs-xl: 20px;
  --fs-2xl: 20px;   /* Entscheidung 44: 26px abgebaut. Seiten-Titel und grosse Zahlen
                       liegen auf der 20er-Stufe; wer Display braucht, nimmt --fs-3xl. */
  --fs-3xl: 34px;
  --fs-hero: 34px;  /* Entscheidung 44: 44px abgebaut, Hero = 34 (--fs-3xl). */
  --fs-input: 16px; /* D-11: fokussierbare Text-/Number-Inputs, unter 16px zoomt iOS
                       beim Fokus (springt mitten im Reservierungs-Flow). Dokumentierte
                       Ausnahme von der Skala, NUR für Inputs. */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* === Tier 1 · Laufweiten (Entscheidung 31.08.2026) ===
     Drei Stufen, sonst nichts. Gemessen wurden vorher 35 verschiedene Werte an rund
     150 Stellen, weil ueberall px stand: 0,5px wirkt bei 10px Schrift anders als bei
     34px, und der Pruefer sah entsprechend acht Laufweiten statt einer Skala. Deshalb
     stehen die Stufen in em, nicht in px: dieselbe Wirkung auf jeder Groesse.
       eng   Display und Headlines in Archivo Black, die dicht stehen sollen
       weit  Meta-Zeilen, Chips, Knopf-Labels, Wortmarke in der Topbar
       caps  gesperrte Versal-Labels und Eyebrows
     Fliesstext bekommt gar keine Deklaration (normal = 0). Wer eine vierte Stufe
     braucht, hat ein Hierarchieproblem, kein Typografieproblem. */
  --ls-tight: -0.015em;
  --ls-wide: 0.05em;
  --ls-caps: 0.18em;

  /* === Tier 2 · Store-Brand Defaults (variant A · Vereo-Klassik) === */
  /* Override per store via inline style="--store-primary: #xxx" on .store-themed root */
  --store-primary: #0F0F0F;
  --store-accent: transparent;
  --store-mood: light;
  --store-button-shape: rect;
  --store-radius-button: 10px;
  --store-radius-card: 14px;

  /* === Motion === */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 320ms ease-out;

  /* === Z-index Scale === */
  --z-sticky: 10;
  --z-modal: 100;
  --z-toast: 200;
}

/* Dark mood (Tier 2, store-level opt-in via [data-mood="dark"]) */
[data-mood="dark"] {
  --bg-app: #0F0F0F;
  --bg-card: #1A1A1A;
  --surface: #222222;
  --surface-soft: #2A2A2A;
  --text: #FAFAFA;
  --text-soft: #B0B0B0;
  --text-muted: #707070;
  --border: #2E2E2E;
}