/* ============================================================
   AGRAMON PERFORMANCE — Design Tokens  (LIGHT / showroom theme)
   ============================================================ */
:root {
  /* --- Surfaces (bright, gallery-clean) --- */
  --bg:          #F4F4F2;   /* off-white page */
  --bg-elev:     #FFFFFF;   /* cards / inputs pop white */
  --bg-elev-2:   #ECECEA;   /* subtle grey wells */
  --ink:         #0C0D10;   /* dark blocks (footer) */
  /* studio grey — matches the truck + engine frame backdrops so the scroll
     scenes (hero/engine) fade into it instead of a too-bright white band */
  --studio:      #BCBCBE;
  --studio-rgb:  188, 188, 190;

  /* --- Hairlines --- */
  --line:        rgba(17, 17, 20, 0.10);
  --line-strong: rgba(17, 17, 20, 0.20);

  /* --- Text --- */
  --text:        #111114;
  --text-dim:    #565860;
  --text-faint:  #9A9CA1;
  --text-on-ink: #F4F4F2;   /* text inside dark footer */

  /* --- Accent: Shelby red (kept under --orange so refs cascade) --- */
  --orange:        #E1271B;
  --orange-bright: #F0392C;
  --orange-soft:   rgba(225, 39, 27, 0.12);
  --blue:          #E1271B;  /* aliased to red — blue is no longer used */

  /* legacy chrome vars (unused on light theme, kept for safety) */
  --chrome-1: #EDEFF2; --chrome-2: #9AA0A8; --chrome-3: #595E66;

  /* --- Type --- */
  --font-display: "Anton", "Archivo", system-ui, sans-serif;
  --font-ui:      "Archivo", system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(3rem, 9.5vw, 9rem);
  --fs-h1:      clamp(2.2rem, 5.2vw, 4.25rem);
  --fs-h2:      clamp(1.8rem, 3.6vw, 3rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.6rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.125rem);
  --fs-sm:      0.875rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight:   0.96;
  --lh-snug:    1.15;
  --lh-body:    1.6;

  --track-display: -0.02em;
  --track-eyebrow:  0.28em;

  /* --- Space --- */
  --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2rem;    --s-6: 3rem;    --s-7: 4rem;    --s-8: 6rem;
  --section-y: clamp(5rem, 10vw, 9rem);
  --container:  1280px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);

  /* --- Radius / Motion --- */
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.5s;
  --z-nav: 100;
}

/* Phones: tighten the section rhythm (mobile min was 5rem -> 160px/section). */
@media (max-width: 600px) {
  :root { --section-y: clamp(3.25rem, 9vw, 5rem); --s-8: 4rem; }
}