/* ===================================
   CSS VARIABLES (DESIGN TOKENS)
   =================================== */
:root {
    /* Colors */
    --primary: #6366F1;
    --primary-dark: #4338CA;
    --primary-light: #818CF8;
    --accent: #F59E0B;
    --accent-light: #FCD34D;
    
    /* Surface Colors */
    --surface: #F8FAFC;
    --surface-dark: #E2E8F0;
    
    /* Text Colors */
    --text: #1E293B;
    --text-secondary: #64748B;
    
    /* Border & Other */
    --border: #E2E8F0;
    --success: #10B981;
    --danger: #EF4444;
    
    /* 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 20px 25px -5px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}