/* ============================================
   GLOBAL DESIGN TOKENS
   ============================================ */

:root {
    /* Container & Layout */
    --container-max-width: 1440px;
    --container-max-width-desktop: 1280px;
    --container-padding-desktop: 32px;
    /* Spacing Scale (from Figma) */
    --spacing-none: 0px;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-md-plus: 10px;
    --spacing-lg: 12px;
    --spacing-lg-plus: 14px;
    --spacing-xl: 16px;
    --spacing-xl-plus: 18px;
    --spacing-xl-plus-plus: 22px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 64px;
    --spacing-8xl: 80px;
    --spacing-9xl: 96px;
    --spacing-10xl: 128px;
    --spacing-2xl: 20px;
    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-4xl: 24px;
    --radius-5xl: 32px;
    --radius-full: 9999px;
    /* Colors - Brand Blue */
    --colors-brand-blue-25: #e9f2f9;
    --colors-brand-blue-50: #deebf5;
    --colors-brand-blue-300: #4987c1;
    --colors-brand-blue-400: #1d5f9d;
    --colors-brand-blue-500: #044f92;
    --colors-brand-blue-550: #053a6d;
    --colors-brand-blue-600: #003b70;
    --colors-brand-blue-700: #002E5A;
    --colors-brand-blue-800: #002548;
    /* Colors - Brand Green */
    --colors-brand-green-25: #eaf3f3;
    --colors-brand-green-50: #D7E8E8;
    --colors-brand-green-100: #AED2D2;
    --colors-brand-green-150: #b4cdcd;
    --colors-brand-green-200: #87BBBB;
    --colors-brand-green-400: #699b9b;
    --colors-brand-green-500: #378e8e;
    --colors-brand-green-600: #2c7171;
    --colors-brand-green-700: #215555;
    --colors-brand-green-800: #1F3B3B;
    --colors-brand-green-850: #194039;
    /* Colors - Base */
    --colors-base-white: #ffffff;
    --colors-white-alpha-22: rgba(255, 255, 255, 0.22);
    --colors-white-alpha-12: rgba(255, 255, 255, 0.12);
    --colors-base-black: #000000;
    /* Component Colors - Buttons */
    --Component-colors-Components-Buttons-Primary-button-primary-bg: #448282;
    --Component-colors-Components-Buttons-Secondary-button-secondary-bg: #FFF;
    --component-colors-components-buttons-secondary-button-secondary-border: #D5D7DA;
    --component-colors-components-buttons-secondary-color-button-secondary-color-fg: #002F5A;
    /* Colors - Background */
    --colors-background-bg-primary: #ffffff;
    --colors-background-bg-secondary: #F9FAFB;
    --colors-background-bg-disabled: #F2F4F7;
    /* Colors - Border */
    --colors-border-border-primary: #d0d5dd;
    --colors-border-border-disabled-subtle: #EAECF0;
    --colors-border-border-secondary: #E9EAEB;
    /* Colors - Text */
    --colors-text-text-primary-900: #101828;
    --colors-text-text-tertiary-600: #475467;
    --colors-text-text-secondary: #535862;
    --colors-text-text-placeholder: #667085;
    /* Colors - Gray (light mode) */
    --colors-gray-light-mode-25: #fcfcfd;
    --colors-gray-light-mode-50: #f9fafb;
    --colors-gray-light-mode-100: #f2f4f7;
    --colors-gray-light-mode-200: #eaecf0;
    --colors-gray-light-mode-300: #D0D5DD;
    --colors-gray-light-mode-400: #98A2B3;
    --colors-gray-light-mode-500: #667085;
    --colors-gray-light-mode-600: #475467;
    --colors-gray-light-mode-700: #344054;
    --colors-gray-light-mode-800: #182230;
    --colors-gray-light-mode-900: #101828;
    /* Colors - Gray Neutral */
    --colors-gray-neutral-500: #535862;
    --colors-gray-neutral-600: #4d5761;
    --colors-gray-neutral-700: #414651;
    /* Colors - Error */
    --colors-error-400: #f97066;
    --colors-error-600: #d92d20;
    /* Colors - Success */
    --colors-success-100: #dcfae6;
    --colors-success-500: #17b26a;
    /* Shadows */
    --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --shadow-md: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-xl: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-xl-no-spread: 0px 12px 16px rgba(16, 24, 40, 0.08), 0px 4px 6px rgba(16, 24, 40, 0.03);
    --shadow-2xl: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03), 0 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    --shadow-btn: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    --shadow-focus-ring: 0 0 0 3px rgba(68, 130, 130, 0.15);
    /* Typography - Font Families */
    --font-family-primary: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-secondary: Inter, Arial, sans-serif;
    /* Typography - Font Sizes (from Figma) */
    --font-size-text-sm: 14px;
    --font-size-text-sm-base: 15px;
    --font-size-text-base: 16px;
    --font-size-text-lg: 18px;
    --font-size-text-xl: 20px;
    --font-size-text-2xl: 24px;
    --font-size-text-3xl: 30px;
    --font-size-text-4xl: 36px;
    --font-size-text-5xl: 48px;
    --font-size-text-6xl: 60px;
    --font-size-text-7xl: 72px;
    /* Typography - Line Heights (from Figma) */
    --line-height-text-sm: 20px;
    --line-height-text-base: 24px;
    --line-height-text-lg: 24px;
    --line-height-text-lg-body: 28px;
    --line-height-text-body: 28px;
    --line-height-text-xl: 30px;
    --line-height-text-2xl: 32px;
    --line-height-text-3xl: 38px;
    --line-height-text-4xl: 44px;
    /* Component Sizes */
    --height-touch-target: 44px;
    --size-close-btn: 40px;
    --height-input: 46px;
    --size-input-addon: 48px;
    --size-zip-input-min: 180px;
    --modal-max-width-sm: 640px;
    --modal-max-width-md: 670px;
    --line-height-text-5xl: 54px;
    --line-height-text-6xl: 64px;
    --line-height-text-7xl: 76px;
    --line-height-tight: 1;
    /* Typography - Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Transitions */
    --transition-base: all 0.2s ease;
    /* Letter Spacing */
    --letter-spacing-tight: -0.72px;
    --letter-spacing-loose: -0.96px;
    /* Width */
    --width-xxs: 320px;
    --width-3xl: 1280px;
    /* Breakpoints */
    --breakpoint-sm: 576px;
    /* Modal Sizing */
    --modal-min-width: 480px;
    --modal-header-min-height: 60px;
    /* Button Heights */
    --height-btn-lg: 58px;
    --height-btn-md: 52px;
    /* Opacity - White Backgrounds */
    --bg-white-alpha-20: rgba(255, 255, 255, 0.2);
    --bg-white-alpha-28: rgba(255, 255, 255, 0.28);
    /* Button Hover Colors */
    --colors-brand-green-hover: #3a7070;
}