[data-theme="light"] {
    /* --- BRAND COLORS --- */
    --brand-primary: #6366f1;       /* Indigo 500 */
    --brand-primary-hover: #4f46e5; /* Indigo 600 */
    --brand-secondary: #f59e0b;     /* Amber 500 */
    
    /* --- BACKGROUNDS --- */
    --bg-body: #f3f4f6;             /* Gray 100 */
    --bg-surface: #ffffff;          /* White */
    --bg-sidebar: #ffffff;          /* White */
    --bg-header: rgba(255, 255, 255, 0.8);
    --bg-hover: #f9fafb;            /* Gray 50 */
    --bg-active: #eef2ff;           /* Indigo 50 */
    
    /* --- TEXT --- */
    --text-main: #111827;           /* Gray 900 */
    --text-muted: #6b7280;          /* Gray 500 */
    --text-on-brand: #ffffff;
    
    /* --- BORDERS --- */
    --border-subtle: #e5e7eb;       /* Gray 200 */
    --border-strong: #d1d5db;       /* Gray 300 */
    
    /* --- SHADOWS --- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    
    /* --- ALERTS --- */
    --alert-success-bg: #ecfdf5;
    --alert-success-text: #047857;
    --alert-danger-bg: #fef2f2;
    --alert-danger-text: #b91c1c;
    --alert-warning-bg: #fffbeb;
    --alert-warning-text: #b45309;
}[data-theme="light"] {
    /* --- BRAND COLORS --- */
    --brand-primary: #6366f1;       /* Indigo 500 */
    --brand-primary-hover: #4f46e5; /* Indigo 600 */
    --brand-secondary: #f59e0b;     /* Amber 500 */
    
    /* --- BACKGROUNDS --- */
    --bg-body: #f3f4f6;             /* Gray 100 */
    --bg-surface: #ffffff;          /* White */
    --bg-sidebar: #ffffff;          /* White */
    --bg-header: rgba(255, 255, 255, 0.8);
    --bg-hover: #f9fafb;            /* Gray 50 */
    --bg-active: #eef2ff;           /* Indigo 50 */
    
    /* --- TEXT --- */
    --text-main: #111827;           /* Gray 900 */
    --text-muted: #6b7280;          /* Gray 500 */
    --text-on-brand: #ffffff;
    
    /* --- BORDERS --- */
    --border-subtle: #e5e7eb;       /* Gray 200 */
    --border-strong: #d1d5db;       /* Gray 300 */
    
    /* --- SHADOWS --- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    
    /* --- ALERTS --- */
    --alert-success-bg: #ecfdf5;
    --alert-success-text: #047857;
    --alert-danger-bg: #fef2f2;
    --alert-danger-text: #b91c1c;
    --alert-warning-bg: #fffbeb;
    --alert-warning-text: #b45309;
}