/* =============================================================================
   X-SPORT RELAUNCH · VARIANTE 2 "RACE DAY"
   tokens.css — Community/Emotion-Hypothese. Startlinie, nicht Labor.
   Signature: das Live-Countdown-„Startblock"-Modul + kinetische Winkel.
   Markenrot #cc0000 = VERIFIZIERT aus Logo (identisch zu V1 — Marke bleibt Marke).
   Bewusste Abweichung vom Plan: kein Duotone (Filter-Risiko) → Overlay-Verläufe.
   ========================================================================== */

:root {
  /* --- FARBROLLEN (dark base — Gegenpol zu V1s Laborpapier) ------------- */
  --void:       #0C0D12;   /* tiefstes Schwarz-Blau, Hero/Header             */
  --ink:        #14161F;   /* Sektions-BG dunkel                            */
  --ink-2:      #1C1F2B;   /* eingelassene dunkle Flächen / Cards           */
  --steel:      #2A2E3D;   /* Borders auf dunkel, Divider                   */

  --paper:      #FFFFFF;   /* helle Sektionen (Shop/PLP — Foto-Ehrlichkeit) */
  --paper-2:    #F4F5F7;   /* helle Sektion alternierend                    */
  --line:       #E4E6EB;   /* Haarlinie hell                                */

  --chalk:      #FFFFFF;   /* Text auf dunkel                               */
  --chalk-dim:  #A6ABBD;   /* Sekundärtext auf dunkel                       */
  --chalk-mute: #6E7488;   /* Tertiär auf dunkel                           */
  --ink-body:   #1C1F2B;   /* Text auf hell                                */
  --ink-dim:    #565C6E;   /* Sekundärtext auf hell (WCAG-geprüft)          */

  --signal:     #E10600;   /* Race-Rot (heller/heißer als V1 #cc0000 für    */
                            /* mehr Energie — Marke bleibt, Ton wird lauter) */
  --signal-600: #C40500;   /* Hover                                        */
  --signal-700: #A10400;   /* Active                                       */

  --flare:      #FF7A00;   /* WARMER ZWEIT-AKZENT für Events (Plan S6 V2)    */
  --flare-600:  #E56A00;
  --flare-ink:  #C25600;   /* flare auf HELLEM Grund (WCAG 4.54:1)          */
  --tok-ink:    #A84600;   /* Token-Text auf orange-getöntem Token-BG (4.75:1)  */

  --go:         #16B364;   /* Verfügbarkeit / Erfolg (auf dunkel)          */
  --go-ink:     #0C8044;   /* Erfolg auf HELLEM Grund (WCAG 5.02:1)         */
  --focus:      #4C9AFF;   /* Fokus-Ring auf beiden Grundtönen sichtbar     */

  /* --- TYPOGRAFIE (condensed uppercase display + humanist body) -------- */
  --font-display: "Archivo Narrow", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-black:   "Archivo", ui-sans-serif, system-ui, sans-serif;  /* wide/black Gegenpol */
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Große, laute Display-Scale (Plan: H1 bis clamp(3rem,9vw,7rem)) */
  --fs-mega:    clamp(3rem, 1.2rem + 9vw, 7rem);      /* Hero-Headline       */
  --fs-h1:      clamp(2.4rem, 1.4rem + 4vw, 4.5rem);
  --fs-h2:      clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h4:      1.125rem;
  --fs-lede:    clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.8125rem;   /* uppercase Labels                            */

  --lh-mega:    0.92;   /* dichte, wuchtige Headlines                       */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-body:    1.6;

  --tr-display: 0.01em;   /* condensed uppercase braucht minimal Luft        */
  --tr-label:   0.14em;
  --tr-mega:    -0.005em;

  /* --- SPACING ---------------------------------------------------------- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
  --section-y: clamp(4rem, 2.5rem + 4vw, 7rem);

  /* --- LAYOUT ----------------------------------------------------------- */
  --container: 1240px;
  --container-wide: 1400px;
  --container-text: 66ch;
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.25rem);

  /* --- RADIUS (etwas weicher als V1, aber nicht rund) ------------------ */
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:22px; --r-pill:999px;

  /* --- ELEVATION -------------------------------------------------------- */
  --shadow-1: 0 2px 8px rgba(12,13,18,.12);
  --shadow-2: 0 12px 34px rgba(12,13,18,.22);
  --shadow-glow: 0 8px 30px rgba(225,6,0,.28);   /* Race-Rot-Glow für CTAs  */

  /* --- MOTION (V2 darf sich bewegen — aber diszipliniert) -------------- */
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 500ms;
  --ease: cubic-bezier(.2,.7,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

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