:root{
  --gold: #F0C24B;
  --grad-start: #F0C24B;
  --grad-end: #D9A92F;

  --bg: #F5F2EC;
  --bg-grad: radial-gradient(1000px 500px at 10% -10%, color-mix(in oklab, #F0C24B 10%, transparent) 0%, transparent 60%),
             radial-gradient(900px 600px at 120% 0%, color-mix(in oklab, #F0C24B 8%, transparent) 0%, transparent 55%);
  --surface: #FFF7ED;
  --text: #111216;
  --muted: #6F7480;
  --border: rgba(0,0,0,0.1);
  --glass: rgba(255,255,255,0.8);
  --glass-strong: rgba(255,255,255,0.95);
  --ring: rgba(0,0,0,0.1);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --radius: 12px;
  --speed: 0.3s;
  --accent-grad: linear-gradient(135deg, #F0C24B, #D9A92F);
}

html[data-theme="dark"]{
  --bg: #0F1115;
  --bg-grad: radial-gradient(1000px 500px at 10% -10%, color-mix(in oklab, #F0C24B 15%, transparent) 0%, transparent 60%),
             radial-gradient(900px 600px at 120% 0%, color-mix(in oklab, #F0C24B 12%, transparent) 0%, transparent 55%);
  --surface: #161A20;
  --text: #ECEEF2;
  --muted: #A9B0B8;
  --border: rgba(255,255,255,0.1);
  --glass: rgba(255,255,255,0.1);
  --glass-strong: rgba(255,255,255,0.15);
  --ring: rgba(255,255,255,0.1);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
}

/* Optional helpers */
.btn-gold{
  background: linear-gradient(180deg, var(--grad-start), var(--grad-end));
  color:#111216; border:none; font-weight:600;
}
.bg-hero-gradient{
  background: radial-gradient(1000px 500px at 10% -10%, color-mix(in oklab, var(--gold) 10%, transparent) 0%, transparent 60%),
              radial-gradient(900px 600px at 120% 0%, color-mix(in oklab, var(--gold) 8%, transparent) 0%, transparent 55%),
              var(--bg);
}