:root {
    /* Brand — The Metals */
    --amber: #D4812A;
    --amber-light: #E09B4E;
    --amber-dark: #B06B1F;
    --gold: #C9A84C;
    --gold-light: #D4BA6E;
    --gold-dark: #A88B3C;
    --iron: #8B9CAF;
    
    /* Semantic — The Signals */
    --bounty: #34D399;
    --caution: #FBBF24;
    --danger: #EF4444;
    --intel: #60A5FA;
    
    /* Spacing — The Grid (4px base) */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
    --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
    --space-8: 32px;  --space-10: 40px; --space-12: 48px;
    --space-16: 64px;
    
    /* Typography */
    --font-display: 'Cinzel', 'Palatino', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
    
    --text-xs: 11px;  --text-sm: 13px;  --text-base: 15px;
    --text-lg: 17px;  --text-xl: 20px;  --text-2xl: 24px;
    --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px;
    
    /* Radius */
    --radius-sm: 4px;   --radius-md: 8px;
    --radius-lg: 12px;  --radius-xl: 16px;
    --radius-full: 9999px;
}

/* Dark theme — The Den at Night (DEFAULT) */
[data-theme="dark"], :root {
    --bg-0: #0C0C0E;
    --bg-1: #141418;
    --bg-2: #1C1C22;
    --bg-3: #252530;
    --surface: #2D2D38;
    --text-1: #E8E0D4;
    --text-2: #A09890;
    --text-3: #605850;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 28px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 20px rgba(212,129,42,0.15);
}

/* Light theme — The Den in Daylight */
[data-theme="light"] {
    --bg-0: #F5F0EA;
    --bg-1: #FDFAF5;
    --bg-2: #EBE5DD;
    --bg-3: #D5CFC5;
    --surface: #FDFAF5;
    --text-1: #1A1814;
    --text-2: #5C5650;
    --text-3: #8A847C;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 28px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 20px rgba(212,129,42,0.08);
}