:root {
  --bg-primary: #0d0d0d;
  --bg-card: #1a1a1a;
  --bg-card-alt: #161616;
  --bg-card-hover: #222222;
  --bg-input: #242424;
  --gold: #D4AF37;
  --gold-dim: #a88820;
  --gold-glow: rgba(212,175,55,0.15);
  --gold-border: rgba(212,175,55,0.35);
  --border-neutral: #2a2a2a;
  --overlay: rgba(0,0,0,0.75);
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --text-muted: #555555;
  --success: #22c55e;
  --danger: #ef4444;
  --info: #3b82f6;
  --warning: #f59e0b;
  --feature-blue: #2980B9;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xs: 11px; --text-sm: 13px; --text-base: 15px;
  --text-md: 17px; --text-lg: 20px; --text-xl: 24px;
  --text-2xl: 32px; --text-3xl: 40px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-full:9999px; --radius-pill:20px;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.5);
  --shadow-gold: 0 0 20px rgba(212,175,55,0.2);
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 64px;
  --bottom-nav-height: 64px;
  --header-height: 60px;
  --content-max-width: 960px;
}

.text-xs  { font-size: var(--text-xs) }
.text-sm  { font-size: var(--text-sm) }
.text-base{ font-size: var(--text-base) }
.text-md  { font-size: var(--text-md) }
.text-lg  { font-size: var(--text-lg) }
.text-xl  { font-size: var(--text-xl) }
.text-2xl { font-size: var(--text-2xl) }