/* ==========================================================================
   The Auto Lab — Design Tokens
   Color, type, motion, spacing, radius, shadow/glow
   Principle: restraint is luxury. Green = ≤10% of pixels (CTAs / hairlines / live-dots).
   ========================================================================== */

:root {
  /* ---------- Color: Foundation ---------- */
  --bg:            #050506;        /* near-black, warmer than #000 to reduce OLED smear */
  --bg-elevated:   #09090B;
  --surface:       #0C0C0E;
  --surface-2:     #16161A;
  --surface-3:     #1F1F24;

  /* ---------- Color: Chrome (primary visual voice) ---------- */
  --chrome-50:     #FAFAFB;
  --chrome-100:    #F2F2F4;
  --chrome-200:    #E5E5E8;
  --chrome-300:    #C9C9CE;
  --chrome-400:    #8A8A8F;
  --chrome-500:    #5F5F65;
  --chrome-600:    #3A3A3F;
  --chrome-700:    #2A2A2F;

  /* ---------- Color: Accent (Auto Lab green, used sparingly) ---------- */
  --accent:        #8BC53F;
  --accent-hot:    #A8E52F;
  --accent-dim:    #4A6B22;
  --accent-glow:   rgba(139, 197, 63, 0.35);

  /* ---------- Color: Text ---------- */
  --text:          #EDEDEF;
  --text-dim:      #9A9AA1;
  --text-muted:    #6B6B72;
  --text-inverse:  #050506;

  /* ---------- Color: Semantic ---------- */
  --success:       var(--accent);
  --warn:          #E8B84D;
  --error:         #E5484D;
  --info:          #77B9FB;

  /* ---------- Color: Borders ---------- */
  --border-hairline:   rgba(255, 255, 255, 0.06);
  --border-subtle:     rgba(255, 255, 255, 0.12);
  --border-emphasis:   rgba(255, 255, 255, 0.22);
  --border-accent:     rgba(139, 197, 63, 0.35);

  /* ---------- Gradients ---------- */
  --grad-chrome:       linear-gradient(180deg, #F2F2F4 0%, #C9C9CE 35%, #8A8A8F 75%, #3A3A3F 100%);
  --grad-chrome-flat:  linear-gradient(180deg, #E5E5E8 0%, #8A8A8F 100%);
  --grad-accent:       linear-gradient(180deg, #A8E52F 0%, #8BC53F 50%, #4A6B22 100%);
  --grad-hero-floor:   radial-gradient(ellipse 80% 40% at 50% 100%, rgba(139, 197, 63, 0.08) 0%, transparent 70%);
  --grad-vignette:     radial-gradient(ellipse 100% 70% at 50% 50%, transparent 50%, rgba(0,0,0,0.6) 100%);

  /* ---------- Typography ---------- */
  --font-display: 'Clash Display', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Satoshi', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-hero:      clamp(3rem, 7vw, 6rem);        /* display h1 */
  --fs-h1:        clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:        clamp(2rem, 3.5vw, 3.25rem);
  --fs-h3:        clamp(1.375rem, 2vw, 1.75rem);
  --fs-h4:        clamp(1.125rem, 1.5vw, 1.25rem);
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.9375rem;
  --fs-caption:   0.8125rem;
  --fs-eyebrow:   0.75rem;

  --lh-tight:     0.95;
  --lh-snug:      1.15;
  --lh-normal:    1.45;
  --lh-relaxed:   1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;

  /* ---------- Spacing scale (4pt base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 192px;

  /* ---------- Radius ---------- */
  --r-sm:   6px;
  --r:      12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-soft:    0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-elev:    0 20px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-deep:    0 40px 100px -30px rgba(0, 0, 0, 0.95);
  --shadow-inset:   inset 0 0 0 1px var(--border-hairline);
  --shadow-inset-2: inset 0 0 0 1px var(--border-subtle);
  --shadow-chrome:  0 1px 0 0 rgba(255,255,255,0.08) inset, 0 -1px 0 0 rgba(0,0,0,0.4) inset;

  /* ---------- Glow (accent — used ONLY on CTA hover and key indicators) ---------- */
  --glow-accent:    0 0 0 1px rgba(139, 197, 63, 0.25), 0 10px 40px -10px rgba(139, 197, 63, 0.4);
  --glow-accent-lg: 0 0 0 1px rgba(139, 197, 63, 0.4),  0 20px 60px -15px rgba(139, 197, 63, 0.5);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-quick:  cubic-bezier(0.4, 0, 0.2, 1);

  --d-instant: 80ms;
  --d-fast:    160ms;
  --d-ui:      240ms;
  --d-reveal:  480ms;
  --d-hero:    900ms;

  /* ---------- Layout ---------- */
  --container:      min(1280px, 100% - 48px);
  --container-wide: min(1440px, 100% - 32px);
  --container-read: min(760px, 100% - 48px);
  --section-y:      clamp(80px, 12vh, 160px);

  /* ---------- Z-Index scale ---------- */
  --z-behind:  -1;
  --z-base:    0;
  --z-content: 1;
  --z-sticky:  40;
  --z-nav:     50;
  --z-modal:   100;
  --z-toast:   200;
}

/* Honor reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 0ms;
    --d-fast:    0ms;
    --d-ui:      0ms;
    --d-reveal:  0ms;
    --d-hero:    0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}