/* ============================================
   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-lg: 12px;
    --spacing-xl: 16px;
    --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-md: 8px;
    --radius-xl: 12px;
    --radius-4xl: 24px;
    --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-600: #003b70;
    --colors-brand-blue-800: #002548;
    /* Colors - Brand Green */
    --colors-brand-green-50: #D7E8E8;
    --colors-brand-green-100: #AED2D2;
    --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 - Base */
    --colors-base-white: #ffffff;
    /* Colors - Background */
    --colors-background-bg-primary: #ffffff;
    --colors-background-bg-disabled: #F2F4F7;
    /* Colors - Border */
    --colors-border-border-primary: #d0d5dd;
    --colors-border-border-disabled-subtle: #EAECF0;
    /* Colors - Text */
    --colors-text-text-primary-900: #101828;
    --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-600: #4d5761;
    /* Colors - Error */
    --colors-error-400: #f97066;
    --colors-error-600: #d92d20;
    /* 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);
    /* Typography - Font Families */
    --font-family-primary: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Typography - Font Sizes (from Figma) */
    --font-size-text-sm: 14px;
    --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-xl: 30px;
    --line-height-text-2xl: 32px;
    --line-height-text-3xl: 38px;
    --line-height-text-4xl: 44px;
    --line-height-text-5xl: 54px;
    --line-height-text-6xl: 64px;
    --line-height-text-7xl: 76px;
    /* Typography - Font Weights */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    /* Letter Spacing */
    --letter-spacing-tight: -0.72px;
    --letter-spacing-loose: -0.96px;
    /* Width */
    --width-xxs: 320px;
    --width-3xl: 1280px;
}