/* ==========================================================================
   CSS Variables - Design Tokens
   ========================================================================== */

:root {
    /* Colors - Modern vibrant palette */
    --color-primary: #2B8FAE;
    --color-primary-dark: #1E7A96;
    --color-primary-light: #4FB3D1;

    --color-secondary: #34C759;
    --color-secondary-dark: #2AA24A;
    --color-secondary-light: #6ADE8B;

    --color-accent: #F5A623;
    --color-accent-dark: #E09100;
    --color-accent-light: #FFD580;

    /* Semantic colors */
    --color-success: #4CAF50;
    --color-success-light: rgba(76, 175, 80, 0.15);
    --color-warning: #FF9800;
    --color-warning-light: rgba(255, 152, 0, 0.15);
    --color-error: #E74C3C;
    --color-danger: #E74C3C;
    --color-danger-light: rgba(231, 76, 60, 0.15);
    --color-info: #2196F3;
    --color-info-light: rgba(33, 150, 243, 0.15);

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-gray-50: #F8F9FA;
    --color-gray-100: #F1F3F4;
    --color-gray-200: #E8EAED;
    --color-gray-300: #DADCE0;
    --color-gray-400: #BDC1C6;
    --color-gray-500: #9AA0A6;
    --color-gray-600: #80868B;
    --color-gray-700: #5F6368;
    --color-gray-800: #3C4043;
    --color-gray-900: #202124;
    --color-black: #000000;

    /* Text colors */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-700);
    --text-muted: var(--color-gray-500);
    --text-inverse: var(--color-white);
    --color-text: var(--color-gray-900);
    --color-text-muted: var(--color-gray-500);

    /* Background colors */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-50);
    --bg-tertiary: var(--color-gray-100);
    --color-bg: var(--color-white);
    --color-bg-muted: var(--color-gray-100);

    /* Border colors */
    --border-color: var(--color-gray-300);
    --border-color-light: var(--color-gray-200);
    --color-border: var(--color-gray-300);
    --color-border-light: var(--color-gray-200);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06);

    /* Badge / Toast / Modal semantic colors */
    --badge-success-bg: #D4EDDA;
    --badge-success-text: #155724;
    --badge-warning-bg: #FFF3CD;
    --badge-warning-text: #856404;
    --badge-error-bg: #F8D7DA;
    --badge-error-text: #721C24;
    --badge-info-bg: #D1ECF1;
    --badge-info-text: #0C5460;
    --auth-error-border: #F5C6CB;
    --auth-success-border: #C3E6CB;

    /* Focus / Highlight */
    --color-primary-focus: rgba(43, 143, 174, 0.3);
    --color-primary-focus-light: rgba(43, 143, 174, 0.15);
    --color-primary-highlight: rgba(43, 143, 174, 0.1);
    --spinner-overlay-bg: rgba(255, 255, 255, 0.8);

    /* Button hover states */
    --btn-danger-hover: #C0392B;
    --btn-success-hover: #3D8B40;

    /* Dashboard status text */
    --status-ok-text: #1B6D1F;
    --status-info-text: #0D5FAD;
    --status-warning-text: #A85D00;

    /* Landing hero */
    --landing-hero-gradient: linear-gradient(135deg, #f0f9ff 0%, #e8f5e9 50%, #fff8e1 100%);

    /* Spacing */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */

    /* Border radius */
    --radius-sm: 0.375rem;    /* 6px */
    --radius-md: 0.625rem;    /* 10px */
    --radius-lg: 1rem;        /* 16px */
    --radius-xl: 1.25rem;     /* 20px */
    --radius-full: 9999px;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Courier New', monospace;

    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-md: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */
    --font-size-5xl: 3rem;     /* 48px */

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

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;

    /* Layout */
    --navbar-height: 72px;
    --sidebar-width: 250px;
    --max-content-width: 1200px;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

/* Auto: follows system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-primary: #3BA8CA;
        --color-primary-dark: #2B8FAE;
        --color-primary-light: #5BC4DF;
        --color-secondary: #3FD666;
        --color-secondary-dark: #34C759;
        --color-secondary-light: #7AEB9A;
        --color-accent: #FFB84D;
        --color-accent-dark: #F5A623;
        --color-accent-light: #FFD580;

        --color-success: #5DC862;
        --color-success-light: rgba(93, 200, 98, 0.15);
        --color-warning: #FFB040;
        --color-warning-light: rgba(255, 176, 64, 0.15);
        --color-error: #EF6B5E;
        --color-danger: #EF6B5E;
        --color-danger-light: rgba(239, 107, 94, 0.15);
        --color-info: #42A5F5;
        --color-info-light: rgba(66, 165, 245, 0.15);

        --color-gray-50: #1E1E2E;
        --color-gray-100: #252538;
        --color-gray-200: #2D2D42;
        --color-gray-300: #3A3A52;
        --color-gray-400: #52526B;
        --color-gray-500: #8888A0;
        --color-gray-600: #9E9EB5;
        --color-gray-700: #B8B8CC;
        --color-gray-800: #D5D5E0;
        --color-gray-900: #EAEAF0;

        --text-primary: #EAEAF0;
        --text-secondary: #B8B8CC;
        --text-muted: #8888A0;
        --text-inverse: #FFFFFF;
        --color-text: #EAEAF0;
        --color-text-muted: #8888A0;

        --bg-primary: #1E1E2E;
        --bg-secondary: #161625;
        --bg-tertiary: #252538;
        --color-bg: #1E1E2E;
        --color-bg-muted: #252538;

        --border-color: #3A3A52;
        --border-color-light: #2D2D42;
        --color-border: #3A3A52;
        --color-border-light: #2D2D42;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
        --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
        --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.2);

        --badge-success-bg: rgba(93, 200, 98, 0.15);
        --badge-success-text: #5DC862;
        --badge-warning-bg: rgba(255, 176, 64, 0.15);
        --badge-warning-text: #FFB040;
        --badge-error-bg: rgba(239, 107, 94, 0.15);
        --badge-error-text: #EF6B5E;
        --badge-info-bg: rgba(66, 165, 245, 0.15);
        --badge-info-text: #42A5F5;
        --auth-error-border: rgba(239, 107, 94, 0.3);
        --auth-success-border: rgba(93, 200, 98, 0.3);

        --color-primary-focus: rgba(59, 168, 202, 0.4);
        --color-primary-focus-light: rgba(59, 168, 202, 0.2);
        --color-primary-highlight: rgba(59, 168, 202, 0.12);
        --spinner-overlay-bg: rgba(30, 30, 46, 0.8);

        --btn-danger-hover: #D94C3E;
        --btn-success-hover: #4CA350;

        --status-ok-text: #5DC862;
        --status-info-text: #42A5F5;
        --status-warning-text: #FFB040;

        --landing-hero-gradient: linear-gradient(135deg, #161625 0%, #1a2420 50%, #1e1c16 100%);
    }
}

/* Manual: explicit dark toggle */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #3BA8CA;
    --color-primary-dark: #2B8FAE;
    --color-primary-light: #5BC4DF;
    --color-secondary: #3FD666;
    --color-secondary-dark: #34C759;
    --color-secondary-light: #7AEB9A;
    --color-accent: #FFB84D;
    --color-accent-dark: #F5A623;
    --color-accent-light: #FFD580;

    --color-success: #5DC862;
    --color-success-light: rgba(93, 200, 98, 0.15);
    --color-warning: #FFB040;
    --color-warning-light: rgba(255, 176, 64, 0.15);
    --color-error: #EF6B5E;
    --color-danger: #EF6B5E;
    --color-danger-light: rgba(239, 107, 94, 0.15);
    --color-info: #42A5F5;
    --color-info-light: rgba(66, 165, 245, 0.15);

    --color-gray-50: #1E1E2E;
    --color-gray-100: #252538;
    --color-gray-200: #2D2D42;
    --color-gray-300: #3A3A52;
    --color-gray-400: #52526B;
    --color-gray-500: #8888A0;
    --color-gray-600: #9E9EB5;
    --color-gray-700: #B8B8CC;
    --color-gray-800: #D5D5E0;
    --color-gray-900: #EAEAF0;

    --text-primary: #EAEAF0;
    --text-secondary: #B8B8CC;
    --text-muted: #8888A0;
    --text-inverse: #FFFFFF;
    --color-text: #EAEAF0;
    --color-text-muted: #8888A0;

    --bg-primary: #1E1E2E;
    --bg-secondary: #161625;
    --bg-tertiary: #252538;
    --color-bg: #1E1E2E;
    --color-bg-muted: #252538;

    --border-color: #3A3A52;
    --border-color-light: #2D2D42;
    --color-border: #3A3A52;
    --color-border-light: #2D2D42;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.2);

    --badge-success-bg: rgba(93, 200, 98, 0.15);
    --badge-success-text: #5DC862;
    --badge-warning-bg: rgba(255, 176, 64, 0.15);
    --badge-warning-text: #FFB040;
    --badge-error-bg: rgba(239, 107, 94, 0.15);
    --badge-error-text: #EF6B5E;
    --badge-info-bg: rgba(66, 165, 245, 0.15);
    --badge-info-text: #42A5F5;
    --auth-error-border: rgba(239, 107, 94, 0.3);
    --auth-success-border: rgba(93, 200, 98, 0.3);

    --color-primary-focus: rgba(59, 168, 202, 0.4);
    --color-primary-focus-light: rgba(59, 168, 202, 0.2);
    --color-primary-highlight: rgba(59, 168, 202, 0.12);
    --spinner-overlay-bg: rgba(30, 30, 46, 0.8);

    --btn-danger-hover: #D94C3E;
    --btn-success-hover: #4CA350;

    --status-ok-text: #5DC862;
    --status-info-text: #42A5F5;
    --status-warning-text: #FFB040;

    --landing-hero-gradient: linear-gradient(135deg, #161625 0%, #1a2420 50%, #1e1c16 100%);
}