/* =============================================================================
   X-SPORT RELAUNCH · VARIANTE 1 "LEISTUNGSZENTRUM"
   tokens.css — Single source of truth für alle Design-Entscheidungen.
   Thesis: Präzises Messinstrument / Laborbericht. Ruhige Autorität, kein "Sale".
   Signature: Messwert-Readout (IBM Plex Mono, tabular figures) für ALLE Zahlen.
   Markenfarbe #cc0000 = VERIFIZIERT aus x-sport.at logo.png (2026-08-30), NICHT
   das im Plan vermutete "orange-red" (das war die Agentur Dyvelopment).
   ========================================================================== */

:root {
  /* --- FARBROLLEN -------------------------------------------------------- */
  /* Basis: kühles "Laborpapier" (bewusst NICHT die AI-Default-Creme #F4F1EA) */
  --paper:        #F1F0EC;   /* Seiten-Hintergrund                            */
  --paper-2:      #E9E8E2;   /* eingelassene Flächen / abwechselnde Sektionen */
  --surface:      #FFFFFF;   /* Karten, Produktflächen (Foto-Ehrlichkeit)     */
  --data-bg:      #E7ECEF;   /* Messpanel / "Instrumenten-Screen" (kühl-slate)*/

  --ink:          #14161A;   /* Primärtext (graphit-schwarz)                  */
  --graphite:     #3B404A;   /* Sekundärtext / Struktur                       */
  --muted:        #5F646D;   /* Tertiär / Captions / disabled (WCAG AA ≥4.85:1) */

  --line:         #D7D6CF;   /* Haarlinie auf --paper                         */
  --line-surface: #E7E6E1;   /* Haarlinie auf --surface                       */
  --line-strong:  #C3C2BA;   /* betonte Trennung                             */

  --signal:       #CC0000;   /* Markenrot — CTAs, Schlüsselzahl-Betonung      */
  --signal-700:   #A70000;   /* Hover                                        */
  --signal-800:   #8B0000;   /* Active/Pressed                               */
  --signal-tint:  #FBECEC;   /* sehr helle Fläche (Hinweisboxen, Sale-Preis)  */

  --stock:        #1E7A46;   /* NUR Verfügbarkeit / In-den-Warenkorb-Erfolg   */
  --stock-tint:   #E7F2EB;

  --focus:        #1657C4;   /* Fokus-Ring (blau, klar unterscheidbar v. Rot) */

  /* --- TYPOGRAFIE -------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid Type-Scale (clamp: min @360px … max @1440px) */
  --fs-display: clamp(2.4rem, 1.55rem + 3.6vw, 4rem);     /* Hero H1        */
  --fs-h1:      clamp(2rem,  1.5rem  + 2.1vw, 3rem);       /* Seiten-H1      */
  --fs-h2:      clamp(1.55rem, 1.2rem + 1.4vw, 2.25rem);   /* Sektion        */
  --fs-h3:      clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
  --fs-h4:      1.0625rem;
  --fs-lede:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);/* Einleitung     */
  --fs-body:    1.0625rem;                                  /* 17px           */
  --fs-sm:      0.9375rem;                                  /* 15px           */
  --fs-xs:      0.8125rem;                                  /* 13px Caption   */
  --fs-eyebrow: 0.75rem;                                    /* Mono-Label     */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.6;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-label:    0.12em;   /* Mono-Eyebrows (Readout-Charakter)         */

  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;
  --w-bold:  700;

  /* --- SPACING (4px-Basis) ---------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  /* Vertikaler Sektions-Rhythmus (fluid) */
  --section-y: clamp(3.5rem, 2.5rem + 3vw, 6rem);

  /* --- LAYOUT ------------------------------------------------------------ */
  --container:      1200px;   /* Content-Maximalbreite                        */
  --container-wide: 1320px;   /* volle Sektionen                             */
  --container-text: 68ch;     /* Fließtext-Lesebreite                        */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* --- RADIUS (knapp/technisch, kein weiches Runden) -------------------- */
  --r-sm: 3px;   --r-md: 6px;   --r-lg: 10px;   --r-pill: 999px;

  /* --- ELEVATION (minimal, sonst Haarlinien) --------------------------- */
  --shadow-1: 0 1px 2px rgba(20,22,26,.06), 0 1px 1px rgba(20,22,26,.04);
  --shadow-2: 0 4px 14px rgba(20,22,26,.09), 0 2px 4px rgba(20,22,26,.05);
  --shadow-focus: 0 0 0 3px rgba(22,87,196,.35);

  /* --- MOTION (near-none; alles hinter prefers-reduced-motion) ---------- */
  --dur-fast: 120ms;
  --dur:      200ms;
  --ease:     cubic-bezier(.2, 0, 0, 1);

  /* --- Z-INDEX ----------------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  --z-consent: 300;
  --z-toast: 400;
}