/* ==========================================================================
   AXELLISE DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   Every other stylesheet reads from these variables — never hard-code
   a color or font anywhere else.
   ========================================================================== */

:root {
  /* ---- Brand palette --------------------------------------------------- */
  --ink: #15171b;              /* primary text / near-black */
  --ink-soft: #4b5560;         /* secondary text, steel grey */
  --paper: #f7f6f3;            /* page background, warm white */
  --paper-dim: #eeece7;        /* subtle panel background on paper */
  --asphalt: #1b1d21;          /* dark section background */
  --asphalt-2: #24272c;        /* dark panel on asphalt */
  --line-soft: rgba(21, 23, 27, 0.10);
  --line-on-dark: rgba(247, 246, 243, 0.14);

  --red: #e21b3c;              /* racing red — primary accent, from logo */
  --red-dark: #ad1230;         /* pressed / deep red */
  --red-tint: #fdeaee;         /* red at 6% for backgrounds */
  --amber: #ffb020;            /* caution amber — rare, CTA highlight only */

  /* ---- Semantic aliases -------------------------------------------------*/
  --bg: var(--paper);
  --bg-panel: #ffffff;
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --accent: var(--red);
  --focus-ring: #1f7aeb;

  /* ---- Type -------------------------------------------------------------*/
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-display-xl: clamp(2.75rem, 3.2vw + 2rem, 5.5rem);
  --fs-display-l: clamp(2.1rem, 2vw + 1.5rem, 3.4rem);
  --fs-display-m: clamp(1.6rem, 1.2vw + 1.2rem, 2.25rem);
  --fs-display-s: clamp(1.25rem, 0.6vw + 1.05rem, 1.6rem);
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-body-s: 0.875rem;
  --fs-mono: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* ---- Spacing scale (8px base) ------------------------------------------*/
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 7rem;

  --container-w: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Shape / elevation -------------------------------------------------*/
  --radius-s: 2px;
  --radius-m: 4px;
  --shadow-card: 0 1px 2px rgba(21,23,27,0.06), 0 8px 24px -12px rgba(21,23,27,0.18);
  --shadow-lift: 0 20px 40px -20px rgba(21,23,27,0.35);

  /* ---- Motion -------------------------------------------------------------*/
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}