:root {
    /* DEFAULT THEME: Deep Focus (Dark) */

    /* Backgrounds */
    --bg-body: #1A202C;
    /* Slate 900 */
    --bg-card: #2D3748;
    /* Slate 800 */
    --bg-input: #4A5568;
    /* Slate 700 */
    --bg-overlay: rgba(0, 0, 0, 0.6);

    /* Text */
    --text-primary: #E2E8F0;
    /* Slate 200 */
    --text-secondary: #A0AEC0;
    /* Slate 400 */
    --text-inverse: #1A202C;
    /* Dark text for badges/buttons */

    /* Brand & Accents */
    --primary-500: #5EEAD4;
    /* Softer Teal */
    --primary-600: #2DD4BF;
    /* Medium Teal */
    --primary-700: #14B8A6;
    /* Deeper Teal */
    --primary-glow: rgba(94, 234, 212, 0.2);

    /* Semantic Backgrounds (Badges) */
    --success-bg: rgba(104, 211, 145, 0.2);
    --success-text: #68D391;

    --warning-bg: rgba(245, 101, 101, 0.2);
    --warning-text: #F6AD55;

    --danger-bg: rgba(245, 101, 101, 0.2);
    --danger-text: #F56565;

    --info-text: #63B3ED;

    /* Common */
    --shadow-color: rgba(0, 0, 0, 0.3);

    /* Validation (Mapped) */
    --success-500: var(--success-text);
    --danger-500: var(--danger-text);

    /* Neutral & Legacy Mappings */
    --gray-50: var(--bg-body);
    --gray-200: rgba(255, 255, 255, 0.1);
    /* Border color */
    --gray-400: #94A3B8;
    /* Lighter secondary text */
    --gray-600: var(--text-secondary);
    --gray-900: var(--text-primary);

    /* Typography & Spacing (Shared) */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows (Dynamic) */
    --shadow-sm: 0 1px 2px 0 var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color);

    /* Animation */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 350ms;
}

/* LIGHT THEME OVERRIDES */
[data-theme="light"] {
    /* Backgrounds */
    --bg-body: #F9FAFB;
    /* Gray 50 */
    --bg-card: #FFFFFF;
    /* White */
    --bg-input: #FFFFFF;
    /* White */
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* Text */
    --text-primary: #111827;
    /* Gray 900 */
    --text-secondary: #4B5563;
    /* Gray 600 */
    --text-inverse: #FFFFFF;
    /* White text for buttons */

    /* Brand - Indigo (Original Modern Light) */
    --primary-500: #6366F1;
    /* Indigo 600 */
    --primary-600: #4F46E5;
    /* Indigo 700 */
    --primary-700: #4338CA;
    /* Indigo 800 */
    --primary-glow: rgba(99, 102, 241, 0.3);

    /* Semantic */
    --success-bg: #D1FAE5;
    --success-text: #065F46;

    --warning-bg: #FEF3C7;
    --warning-text: #92400E;

    --danger-bg: #FEE2E2;
    --danger-text: #991B1B;

    --info-text: #3B82F6;

    /* Common */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --gray-200: #E5E7EB;
    /* Light Gray Border */
    --gray-400: #9CA3AF;
    /* Lighter secondary text */
}