/* Enhanced Theme Variables */
:root {
    /* Primary Colors */
    --primary-color: #2563eb; /* Blue-600 */
    --primary-light: #60a5fa; /* Blue-400 */
    --primary-dark: #1d4ed8; /* Blue-700 */
    --accent-color: #3b82f6; /* Blue-500 */

    /* Status Colors */
    --success-color: #22c55e; /* Green-500 */
    --warning-color: #f59e0b; /* Yellow-500 */
    --error-color: #ef4444; /* Red-500 */
    --info-color: #3b82f6; /* Blue-500 */

    /* Background Colors */
    --bg-primary: #ffffff; /* White */
    --bg-secondary: #f8fafc; /* Slate-50 */
    --bg-tertiary: #f1f5f9; /* Slate-100 */

    /* Text Colors */
    --text-primary: #1e293b; /* Slate-900 */
    --text-secondary: #475569; /* Slate-700 */
    --text-tertiary: #64748b; /* Slate-500 */

    /* Border & Shadow */
    --border-color: #e2e8f0; /* Slate-200 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Border Radius */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.375rem; /* 6px */
    --radius-lg: 0.5rem; /* 8px */
    --radius-xl: 0.75rem; /* 12px */
    --radius-2xl: 1rem; /* 16px */
    --radius-full: 9999px;

    /* Spacing */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;    /* 48px */

    /* Transitions */
    --transition: all 0.2s ease-in-out;
    --transition-fast: all 0.15s ease-out;
    --transition-slow: all 0.3s ease-in-out;
}

/* Dark Mode Theme */
.dark {
    --primary-color: #60a5fa; /* Blue-400 */
    --primary-light: #93c5fd; /* Blue-300 */
    --primary-dark: #3b82f6; /* Blue-500 */
    --accent-color: #60a5fa;

    --success-color: #4ade80; /* Green-400 */
    --warning-color: #fbbf24; /* Yellow-400 */
    --error-color: #f87171; /* Red-400 */
    --info-color: #60a5fa;

    --bg-primary: #1e293b; /* Slate-900 */
    --bg-secondary: #334155; /* Slate-700 */
    --bg-tertiary: #475569; /* Slate-600 */

    --text-primary: #f1f5f9; /* Slate-100 */
    --text-secondary: #cbd5e1; /* Slate-300 */
    --text-tertiary: #94a3b8; /* Slate-400 */

    --border-color: #334155; /* Slate-700 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}