/* ============================================================
   DESIGN TOKENS — Music Video Production Agency
   Locked here on Home. Reused verbatim on every later page.
   ============================================================ */

:root{
  /* ---- Color: cinematic grading room, not "AI dark mode" ---- */
  --bg:            #0B0A0C;   /* void black, warm-neutral */
  --bg-elevated:   #141216;   /* card surface */
  --bg-elevated-2: #1B181D;   /* raised card / hover */
  --ink:           #F3EFE7;   /* warm off-white, film-paper */
  --ink-dim:       #B9B2A8;
  --muted:         #756F68;
  --line:          rgba(243,239,231,0.09);
  --line-strong:   rgba(243,239,231,0.16);

  --amber:         #E8A33D;   /* tungsten / warm grade */
  --amber-dim:     #C98A2B;
  --amber-ink:     #17130A;   /* text on amber */
  --teal:          #2FA8A0;   /* cool grade / shadow wheel */
  --teal-dim:      #1F7A74;

  --glow-amber:    rgba(232,163,61,0.16);
  --glow-teal:     rgba(47,168,160,0.14);

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;

  /* ---- Scale ---- */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 2.9rem);
  --step-4:  clamp(2.8rem, 2.1rem + 3.5vw, 4.4rem);
  --step-5:  clamp(3.6rem, 2.4rem + 6vw, 6.4rem);

  /* ---- Spacing ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5.5rem;
  --space-2xl: 9rem;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.16,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: 220ms;
  --dur-med: 520ms;
  --dur-slow: 900ms;

  --radius-sm: 4px;
  --radius-md: 8px;
  --nav-h: 84px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}