@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
    --bg: #060709;
    --surface: #0c0e12;
    --surface-2: #12151b;
    --surface-3: #191d26;
    --surface-glass: rgba(14, 17, 23, 0.75);
    
    --text: #f7f9fd;
    --muted: #9da3af;
    --quiet: #606775;
    
    --gold: #e5b757;
    --gold-light: #f7d78a;
    --gold-dark: #b88d33;
    --gold-wash: rgba(229, 183, 87, 0.1);
    --gold-wash-strong: rgba(229, 183, 87, 0.18);
    --gold-glow: rgba(229, 183, 87, 0.35);
    
    --green: #2ecc71;
    --green-wash: rgba(46, 204, 113, 0.12);
    
    --line: rgba(255, 255, 255, 0.08);
    --line-gold: rgba(229, 183, 87, 0.28);
    
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    --shadow-gold: 0 10px 28px rgba(229, 183, 87, 0.16);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;
    
    --container: 1260px;
    --header-h: 76px;
    --radio-h: 68px;
    
    --font-en: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ar: 'Tajawal', system-ui, -apple-system, sans-serif;
    
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Clean Warm Light Theme */
body.light-theme {
    --bg: #f6f3ee;
    --surface: #ffffff;
    --surface-2: #f0ece5;
    --surface-3: #e6e1d8;
    --surface-glass: rgba(255, 255, 255, 0.92);

    --text: #1c1917;
    --muted: #57534e;
    --quiet: #a8a29e;

    --gold: #b08a3a;
    --gold-light: #c9a44e;
    --gold-dark: #8c6d28;
    --gold-wash: rgba(176, 138, 58, 0.08);
    --gold-wash-strong: rgba(176, 138, 58, 0.16);
    --gold-glow: rgba(176, 138, 58, 0.25);

    --green: #16a34a;
    --green-wash: rgba(22, 163, 74, 0.08);

    --line: rgba(28, 25, 23, 0.07);
    --line-gold: rgba(176, 138, 58, 0.3);

    --shadow: 0 8px 32px rgba(28, 25, 23, 0.06);
    --shadow-gold: 0 8px 32px rgba(176, 138, 58, 0.12);
}