/* Tru-Vu Drive-In — Design Tokens
   Brand: navy dusk sky / marquee red / bulb gold. Fixed brand aesthetic (not a light/dark toggle) —
   dark "cinema" bands for drama, cream "reading" bands for content, consistent in any OS theme. */
:root {
  /* ---- Brand palette ---- */
  --navy-950: #0a1420;
  --navy-900: #0e1a2b;
  --navy-800: #16304f;
  --navy-700: #1f4470;
  --navy-600: #2c5c8f;
  --navy-500: #3d7ab8;

  --red-700: #8f0b20;
  --red-600: #c8102e;
  --red-500: #e0324a;

  --gold-700: #8a5a17; /* text-safe on light/cream backgrounds — 5:1+ contrast, unlike gold-500 */
  --gold-600: #b9781f;
  --gold-500: #d68f2a;
  --gold-400: #e8a33d;
  --gold-300: #f2c46b;

  --cream-50: #faf8f2;
  --cream-100: #f3efe4;
  --sky-100: #eaf2f8;

  --ink-900: #12161c;
  --ink-700: #333c46;
  --ink-500: #5c6773;
  --ink-300: #8b96a3;

  --line-on-dark: rgba(255,255,255,0.14);
  --line-on-light: rgba(18,22,28,0.1);

  /* ---- Semantic ---- */
  --bg: var(--cream-50);
  --bg-elevated: #ffffff;
  --bg-night: var(--navy-900);
  --bg-night-deep: var(--navy-950);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-dark: #f4f7fb;
  --text-on-dark-muted: #b7c3d1;
  --brand: var(--navy-800);
  --brand-dark: var(--navy-900);
  --accent: var(--red-600);
  --accent-dark: var(--red-700);
  --highlight: var(--gold-400);

  /* ---- Type families ---- */
  --font-marquee: 'Anton', 'Oswald', system-ui, sans-serif;
  --font-heading: 'Oswald', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* ---- Fluid type scale (Utopia-style clamp) ---- */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 2.9rem);
  --step-4:  clamp(2.75rem, 2.1rem + 3.2vw, 4.25rem);
  --step-5:  clamp(3.4rem, 2.3rem + 5.2vw, 6.25rem);

  /* ---- Fluid spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-2xl: clamp(3rem, 2rem + 4vw, 6rem);
  --space-3xl: clamp(4rem, 2.5rem + 6vw, 9rem);

  /* ---- Radii ---- */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-full: 999px;

  /* ---- Layered shadows (two per elevation) ---- */
  --shadow-card: 0 1px 3px rgba(10,20,32,0.08), 0 6px 16px rgba(10,20,32,0.08);
  --shadow-elevated: 0 2px 6px rgba(10,20,32,0.14), 0 20px 44px rgba(10,20,32,0.20);
  --shadow-glow-gold: 0 0 1px rgba(232,163,61,0.6), 0 0 28px rgba(232,163,61,0.35);
  --shadow-glow-red: 0 0 1px rgba(200,16,46,0.6), 0 0 28px rgba(200,16,46,0.3);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 780px;
  --nav-offset: 78px; /* overwritten by JS ResizeObserver */
  --measure: 65ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-med: 380ms;
  --dur-slow: 640ms;
}