/* ========================================
   CSS VARIABLES - Design System
   ======================================== */

:root {
    /* Colors - Primary Palette */
    --color-primary: #00668a;
    --color-primary-container: #1cabe3;
    --color-primary-fixed: #c3e8ff;
    --color-primary-fixed-dim: #7ad0ff;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #003b52;
    --color-on-primary-fixed: #001e2c;
    --color-on-primary-fixed-variant: #004c69;
    --color-inverse-primary: #7ad0ff;

    /* Colors - Secondary Palette */
    --color-secondary: #336478;
    --color-secondary-container: #b6e7fe;
    --color-secondary-fixed: #bbe9ff;
    --color-secondary-fixed-dim: #9dcee4;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #38697c;
    --color-on-secondary-fixed: #001f29;
    --color-on-secondary-fixed-variant: #174c5f;

    /* Colors - Tertiary Palette */
    --color-tertiary: #00687b;
    --color-tertiary-container: #35adc9;
    --color-tertiary-fixed: #afecff;
    --color-tertiary-fixed-dim: #66d5f2;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #003c49;
    --color-on-tertiary-fixed: #001f27;
    --color-on-tertiary-fixed-variant: #004e5d;

    /* Colors - Surfaces */
    --color-surface: #f5faff;
    --color-surface-dim: #d6dadf;
    --color-surface-bright: #f5faff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f0f4f9;
    --color-surface-container: #eaeef3;
    --color-surface-container-high: #e4e9ed;
    --color-surface-container-highest: #dee3e8;
    --color-surface-variant: #dee3e8;
    --color-surface-tint: #00668a;
    --color-on-surface: #171c20;
    --color-on-surface-variant: #3e484f;
    --color-inverse-surface: #2c3135;
    --color-inverse-on-surface: #edf1f6;

    /* Colors - Background */
    --color-background: #f5faff;
    --color-on-background: #171c20;

    /* Colors - Error */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* Colors - Utility */
    --color-outline: #6e7980;
    --color-outline-variant: #bdc8d0;

    /* Typography - Font Families */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-secondary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono: 'Courier New', monospace;

    /* Typography - Font Sizes */
    --font-size-display-xl: 60px;
    --font-size-display-xl-mobile: 40px;
    --font-size-headline-lg: 32px;
    --font-size-headline-sm: 24px;
    --font-size-body-lg: 18px;
    --font-size-body-md: 16px;
    --font-size-label-md: 14px;
    --font-size-code-sm: 13px;

    /* Typography - Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Typography - Line Heights */
    --line-height-display-xl: 72px;
    --line-height-display-xl-mobile: 48px;
    --line-height-headline-lg: 40px;
    --line-height-headline-sm: 32px;
    --line-height-body-lg: 28px;
    --line-height-body-md: 24px;
    --line-height-label-md: 20px;
    --line-height-code-sm: 18px;

    /* Typography - Letter Spacing */
    --letter-spacing-display-xl: -0.02em;
    --letter-spacing-headline-lg: -0.01em;
    --letter-spacing-headline-sm: -0.01em;
    --letter-spacing-label-md: 0.02em;

    /* Border Radius */
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Spacing */
    --spacing-unit: 4px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;
    --spacing-4xl: 48px;
    --spacing-5xl: 60px;
    --spacing-6xl: 80px;

    /* Layout */
    --container-max-width: 1280px;
    --gutter-desktop: 24px;
    --gutter-tablet: 20px;
    --gutter-mobile: 16px;
    --margin-desktop: 40px;
    --margin-tablet: 32px;
    --margin-mobile: 16px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(28, 171, 227, 0.05);
    --shadow-xl: 0 24px 48px rgba(12, 12, 12, 0.08);
    --shadow-elevated: 0 15px 40px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 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 Support (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Invert colors for dark mode if needed */
        /* Currently kept same for light design preference */
    }
}