/* === CSS Custom Properties — Design System ===
 * Single source of truth for colors, typography, spacing,
 * shadows, radii, transitions, and breakpoints.
 * Version: 2.0.0 — Full visual redesign
 */

:root {
    /* ── Colors ─────────────────────────────── */
    /* Primary (blue — headers, accents, CTAs) */
    --color-primary:              #0056A7;
    --color-primary-hover:        #00458A;
    --color-primary-light:        #E8F0FE;
    --color-primary-bg:           #DBEAFE;
    --color-primary-dark:          #003D7A;
    --color-primary-border:       #9CB6FF;

    /* Gray scale */
    --color-gray-100:              #F8F9FA;
    --color-gray-200:              #E9ECEF;
    --color-gray-300:              #DEE2E6;
    --color-gray-400:              #CED4DA;
    --color-gray-500:              #ADB5BD;
    --color-gray-600:              #6C757D;
    --color-gray-700:              #495057;
    --color-gray-900:              #212529;

    /* Accent (orange — important actions, highlights) */
    --color-accent:               #FF6F00;
    --color-accent-hover:         #E56500;
    --color-accent-active:        #CC5A00;

    /* Link */
    --color-link:                 #0056A7;
    --color-link-hover:           #00458A;

    /* Neutral */
    --color-white:                #FFFFFF;
    --color-bg:                   #F5F7FA;
    --color-bg-secondary:         #EEF2F7;
    --color-bg-tertiary:          #F8FAFC;
    --color-bg-light:             #F0F4FF;
    --color-text:                 #1A1A2E;
    --color-text-secondary:       #6B7280;
    --color-text-muted:           #6B7280;
    --color-border:               #E5E7EB;
    --color-border-dark:          #94A3B8;
    --color-border-light:         #D1D5DB;
    --color-hover:                #0056A7;

    /* Semantic */
    --color-error:                #EF4444;
    --color-success:              #10B981;
    --color-warning:              #F59E0B;
    --color-info:                 #3B82F6;

    /* Footer / secondary accents */
    --color-footer-text:          #94A3B8;
    --color-header-bg:            #00458A;

    /* Alpha variants for semantic colors */
    --color-error-alpha:          rgba(239, 68, 68, 0.2);

    /* Notification backgrounds */
    --color-success-bg:           #ECFDF5;
    --color-success-text:         #065F46;
    --color-error-bg:             #FEF2F2;
    --color-error-text:           #991B1B;
    --color-warning-bg:           #FFFBEB;
    --color-warning-text:         #92400E;
    --color-info-bg:              #EFF6FF;
    --color-info-text:            #1E40AF;

    /* ── Typography ─────────────────────────── */
    --font-primary:               'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:                  'Fira Code', 'Cascadia Code', monospace;
    --text-xs:                    0.875rem;  /* 14px */
    --text-sm:                    1rem;      /* 16px */
    --text-base:                  1.125rem;  /* 18px */
    --text-md:                    1.125rem;  /* 18px */
    --text-lg:                    1.25rem;   /* 20px */
    --text-xl:                    1.5rem;    /* 24px */
    --text-2xl:                   1.875rem;  /* 30px */
    --text-3xl:                   2.25rem;   /* 36px */
    --leading-tight:              1.25;
    --leading-normal:             1.5;
    --leading-relaxed:            1.75;

    /* ── Spacing ────────────────────────────── */
    --spacing-2xs:                2px;
    --spacing-xs:                 4px;
    --spacing-sm:                 8px;
    --spacing-md:                 16px;
    --spacing-lg:                 24px;
    --spacing-xl:                 32px;
    --spacing-2xl:                48px;
    --spacing-3xl:                64px;

    /* ── Shadows ────────────────────────────── */
    --shadow-xs:                  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:                  0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md:                  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:                  0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl:                  0 16px 40px rgba(0, 0, 0, 0.12);

    /* ── Border Radius ──────────────────────── */
    --radius-none:                0;
    --radius-sm:                  8px;
    --radius-md:                  12px;
    --radius-lg:                  16px;
    --radius-xl:                  24px;
    --radius-full:                50%;

    /* ── Easing curves ─────────────────────── */
    --ease-out:                   cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in:                    cubic-bezier(0.55, 0.09, 0.68, 0.53);
    --ease-in-out:                cubic-bezier(0.46, 0.03, 0.19, 0.93);
    --ease-bounce:                cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Transitions ────────────────────────── */
    --transition-fast:            0.15s ease;
    --transition-normal:          0.3s ease;
    --transition-slow:            0.5s ease;
    --transition-color:           color 0.15s ease, background-color 0.15s ease,
                                  border-color 0.15s ease, fill 0.15s ease;

    /* ── Breakpoints (for reference) ────────── */
    /* --bp-sm: 456px  */
    /* --bp-md: 768px  */
    /* --bp-lg: 1000px */
    /* --bp-xl: 1200px */

    /* ── Z-index scale ──────────────────────── */
    --z-dropdown:                 100;
    --z-sticky:                   200;
    --z-modal-backdrop:           300;
    --z-modal:                    400;
    --z-tooltip:                  500;

    /* ── Header ──────────────────────────────── */
    --header-height:              72px;

    /* ── Glass effect ────────────────────────── */
    --glass-bg:                   rgba(255, 255, 255, 0.72);
    --glass-bg-strong:            rgba(255, 255, 255, 0.85);
    --glass-bg-heavy:             rgba(255, 255, 255, 0.92);
    --glass-border:               rgba(255, 255, 255, 0.3);
    --glass-primary-tint:         rgba(0, 86, 167, 0.06);
    --glass-blur:                 12px;
}

/* ═══════════════════════════════════════════════════════════════
   Dark Theme
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Primary */
    --color-primary:              #60A5FA;
    --color-primary-hover:        #93C5FD;
    --color-primary-light:        #1E3A5F;
    --color-primary-bg:           #172554;
    --color-primary-dark:          #60A5FA;
    --color-primary-border:       #1E40AF;

    /* Gray scale */
    --color-gray-100:              #1E293B;
    --color-gray-200:              #334155;
    --color-gray-300:              #475569;
    --color-gray-400:              #94A3B8;
    --color-gray-500:              #64748B;
    --color-gray-600:              #94A3B8;
    --color-gray-700:              #CBD5E1;
    --color-gray-900:              #F1F5F9;

    /* Accent */
    --color-accent:               #FBBF24;
    --color-accent-hover:         #FCD34D;
    --color-accent-active:        #F59E0B;

    /* Link */
    --color-link:                 #60A5FA;
    --color-link-hover:           #93C5FD;

    /* Neutral */
    --color-white:                #1E293B;
    --color-bg:                   #0F172A;
    --color-bg-secondary:         #1E293B;
    --color-bg-tertiary:          #1E293B;
    --color-bg-light:             #1A2340;
    --color-text:                 #E2E8F0;
    --color-text-secondary:       #94A3B8;
    --color-text-muted:           #94A3B8;
    --color-border:               #334155;
    --color-border-dark:          #475569;
    --color-border-light:         #334155;
    --color-hover:                #60A5FA;

    /* Semantic */
    --color-error:                #F87171;
    --color-success:              #4ADE80;
    --color-warning:              #FBBF24;
    --color-info:                 #60A5FA;

    /* Footer / secondary accents */
    --color-footer-text:          #93C5FD;
    --color-header-bg:            #172554;

    /* Shadows — stronger in dark */
    --shadow-xs:                  0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm:                  0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md:                  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:                  0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl:                  0 16px 40px rgba(0, 0, 0, 0.6);

    /* Glass — dark tint for overlays */
    --glass-bg:                   rgba(15, 23, 42, 0.75);
    --glass-bg-strong:            rgba(15, 23, 42, 0.88);
    --glass-bg-heavy:             rgba(15, 23, 42, 0.95);
    --glass-border:               rgba(255, 255, 255, 0.08);
    --glass-primary-tint:         rgba(96, 165, 250, 0.06);

    /* Alpha variants for semantic colors */
    --color-error-alpha:          rgba(248, 113, 113, 0.2);

    /* Notification dark backgrounds */
    --color-success-bg:           #052E16;
    --color-success-text:         #86EFAC;
    --color-error-bg:             #450A0A;
    --color-error-text:           #FCA5A5;
    --color-warning-bg:           #422006;
    --color-warning-text:         #FDE68A;
    --color-info-bg:              #172554;
    --color-info-text:            #93C5FD;
}