/* ============================================================
   site.css — FX Reels shared styles
   All pages link this. Page-specific styles remain inline.
   ============================================================ */

/* ── CSS variables ─────────────────────────────────────────── */
:root {
  --bg:        #0d0f14;
  --surface:   #161a23;
  --surface2:  #1e2330;
  --surface3:  #242a38;
  --border:    #2a3045;
  --border2:   #363d4a;
  --accent:    #f0b429;
  --accent2:   #3d9df0;
  --text:      #e8eaf0;
  --muted:     #6b7592;
  --green:     #26a69a;
  --red:       #ef5350;
  --yt:        #ff0000;
  --gd:        #34a853;
  --amber-glow: rgba(240,180,41,0.12);
  --blue-glow:  rgba(61,157,240,0.10);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ──────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Utility ───────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}