/* =========================================================
   THEME — color tokens for dark (default) + light, plus the
   feature-accent colors that carry meaning across the site:
     gold   -> Premium / Creator economy
     teal   -> Business / Trust & Safety
     purple -> Banter / live features
     blue   -> core product, everywhere else
   ========================================================= */

:root {
  color-scheme: dark;

  /* Neutrals (dark defaults) */
  --bg: #05070d;
  --bg-alt: #0a0e1a;
  --surface: #0f1424;
  --surface-2: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.09);
  --text-primary: #ffffff;
  --text-secondary: #a7b0c4;
  --text-muted: #6b7280;
  --grid-line: rgba(255, 255, 255, 0.05);
  --shadow-color: rgba(0, 0, 0, 0.55);
  --overlay-fade: rgba(5, 7, 13, 0.85);

  /* Brand accent — identical across both themes */
  --accent-blue: #4a7cff;
  --accent-blue-strong: #2563eb;
  --accent-blue-soft: rgba(74, 124, 255, 0.14);

  --accent-gold: #f0c060;
  --accent-gold-soft: rgba(240, 192, 96, 0.14);

  --accent-teal: #2dd4bf;
  --accent-teal-soft: rgba(45, 212, 191, 0.14);

  --accent-purple: #8b5cf6;
  --accent-purple-soft: rgba(139, 92, 246, 0.14);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f8fafc;
  --bg-alt: #eef1f7;
  --surface: #ffffff;
  --surface-2: rgba(15, 23, 42, 0.03);
  --border: rgba(15, 23, 42, 0.09);
  --text-primary: #0b1220;
  --text-secondary: #4a5568;
  --text-muted: #7a8494;
  --grid-line: rgba(15, 23, 42, 0.05);
  --shadow-color: rgba(15, 23, 42, 0.12);
  --overlay-fade: rgba(248, 250, 252, 0.9);
}

/*
  Smooth theme toggle: cross-fade color changes everywhere instead of an
  instant snap. Scoped to color-only properties (never layout/position), so
  it layers underneath — never fights — any element's own more specific
  transition (e.g. .btn's transform+color transition already covers this
  for buttons; this rule only fills the gap for everything else).
*/
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

/* Respect reduced-motion preference everywhere, site-wide */
@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;
  }
}