/* ==========================================================================
   RennSport — Design tokens
   The single source of truth for colour, type, space, radius, motion, depth.
   Nothing below this file should hard-code a hex value or a raw px rhythm.
   ========================================================================== */

:root {
  /* --- Core brand surfaces ------------------------------------------------ */
  --c-carbon:        #0B0202; /* hero + page foundation */
  --c-oxblood:       #220304; /* secondary dark surface / gradient partner */
  --c-red-deep:      #740105; /* background glow, subtle accents */
  --c-red:           #B00308; /* primary CTA, active state, key highlight */
  --c-white:         #FCFBFB; /* headings, high-priority text */
  --c-titanium:      #9E9898; /* secondary text, dividers, metadata */
  --c-graphite:      #171113; /* cards, alternating dark sections */

  /* --- Derived tones ------------------------------------------------------ */
  --c-red-bright:    #D4141A; /* hover lift on the primary red — NOT for small text (3.8:1) */
  --c-red-text:      #E8474B; /* red as small text: 5.3:1 on carbon, 4.8:1 on graphite */
  --c-red-dim:       #5C0104;
  --c-graphite-2:    #1F1719; /* raised card / hover surface */
  --c-ink:           #060101; /* deepest well: footer, final CTA base */
  --c-titanium-dim:  #8A8485; /* metadata on dark — 5.6:1 on carbon */
  --c-titanium-lift: #C6C1C1; /* body copy on carbon — passes AA at 16px */

  /* --- Lines, edges, veils ------------------------------------------------ */
  --line-hairline:   rgba(158, 152, 152, 0.16);
  --line-strong:     rgba(158, 152, 152, 0.30);
  --line-red:        rgba(176, 3, 8, 0.55);
  --veil-05:         rgba(252, 251, 251, 0.05);
  --veil-08:         rgba(252, 251, 251, 0.08);
  --veil-12:         rgba(252, 251, 251, 0.12);

  /* --- Typography --------------------------------------------------------- */
  /* Michroma is the brand voice but it is extremely wide — it stays on short,
     technical elements (eyebrows, nav, buttons, spec keys). Oxanium, the
     brief's sanctioned alternative, carries the large headlines so an H1 can
     be genuinely cinematic without overflowing a 375px screen. */
  --font-display: "Michroma", "Oxanium", "Arial Narrow", sans-serif;
  --font-headline: "Oxanium", "Michroma", "Arial Narrow", sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --tracking-display: 0.02em;
  --tracking-eyebrow: 0.24em;
  --tracking-label:   0.16em;

  --fs-eyebrow:  clamp(0.625rem, 0.58rem + 0.2vw, 0.75rem);
  --fs-label:    clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem);
  --fs-body-sm:  clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-body:     clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-body-lg:  clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-h4:       clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --fs-h3:       clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-h2:       clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);
  --fs-h1:       clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
  --fs-display:  clamp(2.75rem, 1.5rem + 5.4vw, 5.75rem);
  --fs-stat:     clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);

  --lh-tight: 1.02;
  --lh-snug:  1.22;
  --lh-body:  1.68;

  /* --- Space scale (4px base) --------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;
  --s-12: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.4vw, 3rem);

  /* --- Container ---------------------------------------------------------- */
  --container: 1280px;
  --container-narrow: 860px;
  --measure: 62ch;

  /* --- Radius + shape ----------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;
  --clip-corner: 14px; /* angled corner cut, echoes the logo's geometry */

  /* --- Elevation (restrained; light comes from the red, not the shadow) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 34px 70px -30px rgba(0, 0, 0, 0.95);
  --glow-red: 0 0 0 1px var(--line-red), 0 18px 46px -22px rgba(176, 3, 8, 0.75);

  /* --- Motion ------------------------------------------------------------- */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 520ms;
  --t-cine: 900ms;

  /* --- Layers ------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-skip: 400;

  --header-h: 76px;
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
}