/* ==========================================================
   CSS VARIABLES & DESIGN TOKENS (LIGHT & DARK THEMES)
   ========================================================== */

:root {
    /* Color Palette - Light Theme (Default) */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FC;
    --bg-tertiary: #EEF2F6;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FDFEFE;
    --bg-dark-accent: #0F172A;

    /* Text Colors */
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
    --text-inverse: #FFFFFF;

    /* Gold / Luxury Accent Tokens */
    --gold-primary: #B8860B;
    --gold-secondary: #D4AF37;
    --gold-light: #FBF4E4;
    --gold-glow: rgba(212, 175, 55, 0.25);
    --gold-gradient: linear-gradient(135deg, #B8860B 0%, #D4AF37 50%, #E6CA65 100%);
    --gold-gradient-hover: linear-gradient(135deg, #996F08 0%, #B8860B 50%, #D4AF37 100%);

    /* Primary Brand Accents */
    --accent-blue: #1E3A8A;
    --accent-emerald: #059669;

    /* Borders & Lines */
    --border-color: #E2E8F0;
    --border-light: #F1F5F9;
    --border-gold: rgba(212, 175, 55, 0.4);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.12);
    --shadow-gold: 0 8px 24px rgba(184, 134, 11, 0.25);
    --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.05);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: blur(12px);

    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Header height */
    --header-height: 80px;

    /* Hero Adaptive Overlays */
    --hero-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 45%, rgba(248, 249, 252, 0.92) 100%),
                    radial-gradient(circle at 80% 30%, rgba(212, 175, 55, 0.14) 0%, transparent 60%);
}

/* ==========================================================
   DARK THEME OVERRIDES
   ========================================================== */
[data-theme="dark"] {
    --bg-primary: #0A0D14;
    --bg-secondary: #101420;
    --bg-tertiary: #161C2C;
    --bg-card: #131826;
    --bg-card-hover: #192033;
    --bg-dark-accent: #07090E;

    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-inverse: #0A0D14;

    --gold-primary: #D4AF37;
    --gold-secondary: #F3E5AB;
    --gold-light: rgba(212, 175, 55, 0.12);
    --gold-glow: rgba(212, 175, 55, 0.35);
    --gold-gradient: linear-gradient(135deg, #D4AF37 0%, #E6CA65 50%, #F5E296 100%);
    --gold-gradient-hover: linear-gradient(135deg, #B8860B 0%, #D4AF37 50%, #E6CA65 100%);

    --border-color: #1E293B;
    --border-light: #182234;
    --border-gold: rgba(212, 175, 55, 0.3);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.7);
    --shadow-gold: 0 8px 30px rgba(212, 175, 55, 0.3);
    --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.4);

    --glass-bg: rgba(16, 20, 32, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* Hero Adaptive Overlays (Dark Mode) */
    --hero-overlay: linear-gradient(135deg, rgba(10, 13, 20, 0.94) 0%, rgba(16, 20, 32, 0.85) 45%, rgba(10, 13, 20, 0.92) 100%),
                    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.18) 0%, transparent 60%);
}