/* ================= APEX CRYPTO — THEME VARIABLES (LIGHT + DARK) =================
   Referenced by every page's Tailwind config via var(--brand-x), so bg-brand-dark,
   text-brand-heading, border-brand-border etc. automatically repaint when the
   `dark` class is toggled on <html>. Light is the default (no class needed). */

:root {
  --brand-dark: #F4F6F9;
  --brand-darker: #E8ECF1;
  --brand-card: #FFFFFF;
  --brand-cardHover: #F1F5F9;
  --brand-border: #E2E8F0;
  --brand-borderLight: #CBD5E1;
  --brand-heading: #0F172A;
  --brand-body: #334155;
  --brand-muted: #64748B;
}

html.dark {
  --brand-dark: #080B11;
  --brand-darker: #040609;
  --brand-card: #101724;
  --brand-cardHover: #172235;
  --brand-border: #1E293B;
  --brand-borderLight: #334155;
  --brand-heading: #FFFFFF;
  --brand-body: #E2E8F0;
  --brand-muted: #94A3B8;
}