/* ==========================================================================
   TOKENS — Dusk Convergence
   Berkeley blue-gold × Northeastern red-black, all desaturated to evening dusk
   ========================================================================== */

:root {
  /* ----- BACKGROUND ----- */
  /* Single dusk-blue background used across the whole site (opening, gallery,
     group, final). Other --bg-N tokens stay defined for any future reuse. */
  --bg-base:  #1F2942;
  --bg-1:     #1F2942;
  --bg-2:     #262945;
  --bg-3:     #2C2A48;
  --bg-4:     #322B45;
  --bg-5:     #382C42;
  --bg-6:     #3A2D3E;
  --bg-7:     #3D2D3A;
  --bg-8:     #382B3A;
  --bg-final: #1A2238;
  --bg-current: var(--bg-base);

  /* ----- ELEVATIONS ----- */
  --bg-elev-1: rgba(255, 255, 255, 0.04);
  --bg-elev-2: rgba(255, 255, 255, 0.07);

  /* ----- TEXT ----- */
  --text-primary: #F2EBDC;
  --text-muted:   rgba(242, 235, 220, 0.68);
  --text-dim:     rgba(242, 235, 220, 0.42);
  --text-faint:   rgba(242, 235, 220, 0.22);

  /* ----- ACCENTS ----- */
  --accent-gold:    #E5B86D;   /* Berkeley gold, desaturated */
  --accent-rust:    #C66B5C;   /* NEU red, terracotta-ed */
  --accent-ink:     #1A1A1A;   /* deep ink for handwritten */

  --accent-gold-dim: rgba(229, 184, 109, 0.32);
  --accent-rust-dim: rgba(198, 107, 92, 0.32);

  /* ----- BORDERS ----- */
  --border-soft: rgba(242, 235, 220, 0.10);
  --border-mid:  rgba(242, 235, 220, 0.20);
  --border-strong: rgba(242, 235, 220, 0.35);

  /* ----- POLAROID ----- */
  --polaroid-paper: #F4EDDC;
  --polaroid-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55),
                     0 8px 16px -8px rgba(0, 0, 0, 0.4);

  /* ----- TYPOGRAPHY ----- */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-hand:    "Caveat", "Bradley Hand", cursive;

  /* fluid type scale */
  --fs-display:  clamp(64px, 11vw, 160px);
  --fs-h1:       clamp(40px, 5.5vw, 88px);
  --fs-h2:       clamp(28px, 3vw, 44px);
  --fs-h3:       clamp(20px, 1.8vw, 28px);
  --fs-body:     clamp(16px, 1.1vw, 19px);
  --fs-small:    15px;
  --fs-caption:  13px;
  --fs-tag:      clamp(48px, 6vw, 96px);

  /* ----- SPACING (4px base) ----- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 192px; --sp-12: 256px;

  /* ----- DURATION ----- */
  --dur-micro: 120ms;
  --dur-fast:  240ms;
  --dur-base:  480ms;
  --dur-slow:  800ms;
  --dur-xslow: 1200ms;

  /* ----- EASING (CSS) ----- */
  --ease-smooth: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-enter:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit:   cubic-bezier(0.5, 0, 0.75, 0);
  --ease-rail:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ----- LAYOUT ----- */
  --container-max: 1280px;
  --gutter-desktop: 96px;
  --gutter-tablet:  48px;
  --gutter-mobile:  24px;

  /* ----- Z-INDEX ----- */
  --z-bg:       0;
  --z-content:  10;
  --z-overlay:  50;
  --z-player:   100;
}

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