:root {
  /* Light */
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(2,6,23,.08);

  /* Brand - Using Tailwind Primary Colors */
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --accent: #2B2D42;

  --radius: 0.75rem;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --ring: 0 0 0 3px rgba(99,102,241,.35);

  --container: 640px; /* feed width */
}

[data-theme="dark"], .dark-theme {
  --bg: #0b1020;
  --card: #131a2b;
  --text: #EDF2F4;
  --muted: #8D99AE;
  --border: rgba(255,255,255,.08);

  /* Brand - Using Tailwind Primary Colors */
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --accent: #2B2D42;

  --radius: 0.75rem;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(79,70,229,.35);
}

/* Apply dark theme by default for modern OnlyRides look */
body {
  background: var(--bg);
  color: var(--text);
}

/* Auto dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --card: #131a2b;
    --text: #EDF2F4;
    --muted: #8D99AE;
    --border: rgba(255,255,255,.08);
    --shadow: 0 12px 40px rgba(0,0,0,.35);
    --ring: 0 0 0 3px rgba(0,224,187,.35);
  }
}

/* Force dark theme for creators page */
body.creators-page {
  --bg: #0b1020;
  --card: #131a2b;
  --text: #EDF2F4;
  --muted: #8D99AE;
  --border: rgba(255,255,255,.08);
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(0,224,187,.35);
}