/* ===== DESIGN TOKENS - DIGISAPIENCE ===== */
:root {
    /* ===== BRAND COLORS ===== */
    --primary: #F8BE14;
    --primary-dark: #E5A910;
    --primary-light: #FAD257;
    --primary-rgb: 248, 190, 20;
    
    /* ===== DARK THEME (Default) ===== */
    --bg-dark: #0E0E0E;
    --bg-surface: #1A1A1A;
    --bg-card: #222222;
    --bg-elevated: #2A2A2A;
    --border: #2A2A2A;
    --border-light: #333333;
    
    /* ===== TEXT COLORS ===== */
    --text-primary: #FFFFFF;
    --text-secondary: #BDBDBD;
    --text-muted: #8A8A8A;
    --text-inverse: #0E0E0E;
    
    /* ===== STATUS COLORS ===== */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    
    /* ===== GLASSMORPHISM ===== */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --glass-blur: blur(12px);
    
    /* ===== 8-POINT GRID SYSTEM ===== */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 56px;
    --space-8: 64px;
    --space-9: 72px;
    --space-10: 80px;
    --space-12: 96px;
    --space-16: 128px;
    
    /* ===== CONTAINER WIDTHS ===== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;
    
    /* ===== TRANSITIONS (Subtle) ===== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* ===== Z-INDEX ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-popover: 400;
    --z-tooltip: 500;
}

/* Light mode (optional but maintain dark as default) */
@media (prefers-color-scheme: light) {
    :root {
        --bg-dark: #FFFFFF;
        --bg-surface: #F5F5F5;
        --bg-card: #EEEEEE;
        --bg-elevated: #E5E5E5;
        --border: #E0E0E0;
        --border-light: #D4D4D4;
        --text-primary: #0E0E0E;
        --text-secondary: #4A4A4A;
        --text-muted: #757575;
        --glass-bg: rgba(0, 0, 0, 0.02);
        --glass-border: rgba(0, 0, 0, 0.05);
    }
}