:root {
    /* Color Palette */
    --bg-color: #050505;
    --surface-color: #0b0b0b;
    --card-color: #111111;
    --card-hover-color: #161616;
    
    --primary-gold: #c9a96e;
    --secondary-gold: #e5d0a1;
    --gold-glow: rgba(201, 169, 110, 0.15);
    --gold-glow-strong: rgba(201, 169, 110, 0.3);
    
    --white: #ffffff;
    --muted: #a5a5a5;
    --muted-dark: #666666;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.16);
    
    /* Semantic Colors */
    --success: #00c853;
    --success-glow: rgba(0, 200, 83, 0.15);
    --danger: #ff3d00;
    --danger-glow: rgba(255, 61, 0, 0.15);
    --warning: #ffb300;
    --warning-glow: rgba(255, 179, 0, 0.15);
    --info: #29b6f6;
    --info-glow: rgba(41, 182, 246, 0.15);
    
    /* Fonts */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Layout */
    --container-max-width: 1400px;
    --header-height: 80px;
    --sidebar-width: 280px;
    
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 9999px;
    
    /* Shadows & Glows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.9);
    --gold-shadow: 0 0 30px rgba(201, 169, 110, 0.15);
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme Variables */
[data-theme="light"] {
    --bg-color: #f7f7f7;
    --surface-color: #ffffff;
    --card-color: #f0f0f0;
    --card-hover-color: #e5e5e5;
    
    --primary-gold: #aa8649;
    --secondary-gold: #c9a96e;
    --gold-glow: rgba(170, 134, 73, 0.1);
    --gold-glow-strong: rgba(170, 134, 73, 0.2);
    
    --white: #0a0a0a;
    --muted: #666666;
    --muted-dark: #a5a5a5;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.16);
    
    --success-glow: rgba(0, 200, 83, 0.1);
    --danger-glow: rgba(255, 61, 0, 0.1);
    --warning-glow: rgba(255, 179, 0, 0.1);
    --info-glow: rgba(41, 182, 246, 0.1);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
}
