/* ============================================================
   DESIGN TOKENS — Blue & Indigo Theme
   Every -light has a -dark, every -lighter has a -darker
   ============================================================ */

:root {
    /* Primary — Deep Navy Blue */
    --color-primary: #1B2A4A;
    --color-primary-light: #243860;
    --color-primary-lighter: #2D4778;
    --color-primary-dark: #141F38;
    --color-primary-darker: #0E1628;
    --color-primary-rgb: 27, 42, 74;

    /* Secondary — Steel Blue */
    --color-secondary: #4A6FA5;
    --color-secondary-light: #5C82B8;
    --color-secondary-lighter: #7396C8;
    --color-secondary-dark: #3B5C8A;
    --color-secondary-darker: #2E4A70;
    --color-secondary-rgb: 74, 111, 165;

    /* Accent — Sky Blue */
    --color-accent: #3B9AE1;
    --color-accent-light: #5AAEE8;
    --color-accent-lighter: #7DC2EF;
    --color-accent-dark: #2A7CC0;
    --color-accent-darker: #1E5F96;
    --color-accent-rgb: 59, 154, 225;

    /* Tertiary — Soft Periwinkle */
    --color-tertiary: #8EA4C8;
    --color-tertiary-light: #A8B9D6;
    --color-tertiary-lighter: #C2CFE4;
    --color-tertiary-dark: #6E89B0;
    --color-tertiary-darker: #557098;
    --color-tertiary-rgb: 142, 164, 200;

    /* Backgrounds */
    --color-bg-body: #F4F7FB;          /* Page background */
    --color-bg-surface: #FFFFFF;        /* Cards, modals, sidebar */
    --color-bg-surface-rgb: 255, 255, 255;
    --color-bg-surface-2: #EDF1F7;     /* Secondary surfaces (inputs, hover states) */
    --color-bg-overlay: rgba(27, 42, 74, 0.65); /* Modal backdrop */

    /* Text */
    --color-text-main: #1A1D26;         /* Headings, body text */
    --color-text-muted: #5A6070;        /* Descriptions, secondary text */
    --color-text-light: #8B919E;        /* Placeholders, captions */

    /* Borders */
    --color-border: #D5DAE5;            /* Default borders */
    --color-border-light: #E6E9F0;      /* Subtle borders */

    /* Functional */
    --color-success: #2D8B4E;
    --color-error: #D63E3E;
    --color-warning: #E8943E;
    --color-info: #3B9AE1;

    /* Typography — Font Families */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Outfit', sans-serif;
    --font-alt: 'Urbanist', sans-serif;

    /* Typography — Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Typography — Modular Scale (1.25 ratio) */
    --text-xs: 0.64rem;
    --text-sm: 0.8rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.563rem;
    --text-2xl: 1.953rem;
    --text-3xl: 2.441rem;
    --text-4xl: 3.052rem;
    --text-5xl: 3.815rem;

    /* Spacing — 4px base */
    --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-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Spacing — Legacy aliases */
    --spacing-xs: var(--space-2);
    --spacing-sm: var(--space-4);
    --spacing-md: var(--space-8);
    --spacing-lg: var(--space-16);
    --spacing-xl: var(--space-32);

    /* Border Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* Shadows — 5-level elevation with blue tint */
    --shadow-xs: 0 1px 2px rgba(27, 42, 74, 0.04);
    --shadow-sm: 0 2px 8px rgba(27, 42, 74, 0.06);
    --shadow-md: 0 4px 16px rgba(27, 42, 74, 0.08);
    --shadow-lg: 0 8px 24px rgba(27, 42, 74, 0.12);
    --shadow-xl: 0 16px 48px rgba(27, 42, 74, 0.16);
    --shadow-2xl: 0 24px 64px rgba(27, 42, 74, 0.20);
    --shadow-hover: 0 12px 32px rgba(27, 42, 74, 0.14);
    --shadow-primary: 0 8px 24px rgba(27, 42, 74, 0.25);
    --shadow-secondary: 0 8px 24px rgba(74, 111, 165, 0.25);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(213, 218, 229, 0.4);
    --glass-blur: 12px;

    /* Backdrop Blur */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
    /* Primary — Light Steel Blue (inverted) */
    --color-primary: #7396C8;
    --color-primary-light: #8EA9D4;
    --color-primary-lighter: #A8BDE0;
    --color-primary-dark: #5C82B8;
    --color-primary-darker: #4A6FA5;
    --color-primary-rgb: 115, 150, 200;

    /* Secondary — Soft Periwinkle (inverted) */
    --color-secondary: #8EA4C8;
    --color-secondary-light: #A8B9D6;
    --color-secondary-lighter: #C2CFE4;
    --color-secondary-dark: #6E89B0;
    --color-secondary-darker: #557098;
    --color-secondary-rgb: 142, 164, 200;

    /* Accent — Bright Sky Blue (inverted) */
    --color-accent: #5AAEE8;
    --color-accent-light: #7DC2EF;
    --color-accent-lighter: #A0D4F4;
    --color-accent-dark: #3B9AE1;
    --color-accent-darker: #2A7CC0;
    --color-accent-rgb: 90, 174, 232;

    /* Tertiary — Muted Navy (inverted) */
    --color-tertiary: #557098;
    --color-tertiary-light: #6E89B0;
    --color-tertiary-lighter: #8EA4C8;
    --color-tertiary-dark: #3B5C8A;
    --color-tertiary-darker: #2E4A70;
    --color-tertiary-rgb: 85, 112, 152;

    /* Backgrounds — Dark surfaces */
    --color-bg-body: #0F141D;
    --color-bg-surface: #161C28;
    --color-bg-surface-rgb: 22, 28, 40;
    --color-bg-surface-2: #1D2434;
    --color-bg-overlay: rgba(15, 20, 29, 0.85);

    /* Text — Light on dark */
    --color-text-main: #E2E8F2;
    --color-text-muted: #9BA5B8;
    --color-text-light: #6B7488;

    /* Borders — Subtle in dark mode */
    --color-border: #2A3245;
    --color-border-light: #1F2738;

    /* Functional — Adjusted for dark backgrounds */
    --color-success: #3DA86A;
    --color-error: #FF6B6B;
    --color-warning: #FFB84D;
    --color-info: #5AAEE8;

    /* Shadows — Darker and stronger */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.50);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.55);
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-primary: 0 8px 24px rgba(115, 150, 200, 0.20);
    --shadow-secondary: 0 8px 24px rgba(142, 164, 200, 0.20);

    /* Glassmorphism — Dark variant */
    --glass-bg: rgba(22, 28, 40, 0.88);
    --glass-border: rgba(42, 50, 69, 0.55);
}