/* =========================================================
   ReelOmni v1.3 — tokens.css (FINAL)
   Purpose: brand color tokens, fonts, gradients, shadows,
            breakpoints, motion preferences
   ========================================================= */

/* ---------- Brand Palette ---------- */
:root {
  /* Primary ReelOmni brand colors */
  --gold: #D4AF37;
  --black: #0D0D0D;
  --red: #9F1D20;
  --sand: #DCC8A4;

  /* Supporting tints & shades */
  --gold-light: #f2d997;
  --gold-dark: #a88622;
  --red-light: #e04b4e;
  --sand-light: #efe3ca;
  --sand-dark: #b8a57d;

  /* Neutral surfaces */
  --bg: #0b0b0c;
  --bg-2: #0f0f12;
  --surface: #121214;
  --surface-1: #151518;
  --surface-2: #191a1f;
  --line: #2a2a33;

  /* Text colors */
  --text: #E8E8EA;
  --text-strong: #ffffff;
  --muted: #a6a6af;

  /* Accent gradients */
  --grad-gold: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  --grad-red: linear-gradient(90deg, var(--red-light) 0%, var(--red) 100%);
  --grad-sand: linear-gradient(90deg, var(--sand) 0%, var(--sand-dark) 100%);

  /* Glow accents */
  --glow-gold: 0 0 24px rgba(212,175,55,.3);
  --glow-red: 0 0 24px rgba(159,29,32,.3);
}

/* ---------- Typography Tokens ---------- */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

/* ---------- Font Sizes ---------- */
:root {
  --fs-xxl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --fs-xl: clamp(1.8rem, 1.2rem + 1.5vw, 2.4rem);
  --fs-lg: 1.25rem;
  --fs-md: 1rem;
  --fs-sm: .92rem;
  --fs-xs: .82rem;
}

/* ---------- Spacing Tokens ---------- */
:root {
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
}

/* ---------- Shadows ---------- */
:root {
  --shadow-sm: 0 2px 6px rgba(0,0,0,.15);
  --shadow-md: 0 4px 20px rgba(0,0,0,.25);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.35);
  --shadow-glow: 0 0 30px rgba(212,175,55,.3);
}

/* ---------- Transitions & Motion ---------- */
:root {
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Breakpoints ---------- */
@media (max-width: 960px) {
  :root { --fs-xxl: 2.2rem; --fs-xl: 1.6rem; }
}
@media (max-width: 640px) {
  :root { --fs-xxl: 1.9rem; --fs-xl: 1.4rem; }
}

/* ---------- Light Theme Overrides ---------- */
.theme-light {
  --bg: #f7f7fb;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-1: #fbfbfe;
  --surface-2: #f3f3f9;
  --line: #e6e6ef;
  --text: #17171a;
  --text-strong: #000000;
  --muted: #5d5d68;
  --gold: #D4AF37;
  --red: #9F1D20;
}

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