/* ===== ROOT VARIABLES - DEFAULT DARK ===== */
:root {
    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    
    /* Colors */
    --accent-orange: #ff5e00;
    --accent-orange-light: #ff8c00;
    
    /* Glass Morphism */
    --glass-bg: rgba(20, 20, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    
    /* Backgrounds */
    --bg-primary: #0a0a0f;
    --bg-secondary: #1a1a2e;
    --surface-hover: rgba(255, 94, 0, 0.05);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.1);
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --surface-hover: rgba(255, 94, 0, 0.08);
}

/* ===== SMOOTH TRANSITION ===== */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== LIGHT MODE BODY ===== */
[data-theme="light"] body {
    background-color: #f5f5f5;
    background-image: radial-gradient(circle at 20% 80%, rgba(255, 94, 0, 0.02) 0%, transparent 50%);
}

/* ===== DARK MODE BODY ===== */
[data-theme="dark"] body,
:root body {
    background-color: #0a0a0f;
    background-image: radial-gradient(circle at 20% 80%, rgba(255, 94, 0, 0.05) 0%, transparent 50%);
}

/* ===== NAVBAR LIGHT MODE ===== */
[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .logo-text,
[data-theme="light"] .nav-links a,
[data-theme="light"] .lang-btn {
    color: #1a1a1a;
}

/* ===== SCROLLBAR ===== */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 94, 0, 0.3);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 94, 0, 0.5);
}

/* ===== SYSTEM PREFERENCE ===== */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --text-primary: #1a1a1a;
        --text-secondary: #666666;
        --glass-bg: rgba(255, 255, 255, 0.95);
        --glass-border: rgba(0, 0, 0, 0.1);
        --bg-primary: #f5f5f5;
        --bg-secondary: #ffffff;
    }
    
    :root:not([data-theme]) body {
        background-color: #f5f5f5;
    }
}