:root {
    --font-family-body: Inter, sans-serif;
    --font-family-heading: Outfit, sans-serif;

    --font-weight-extra-light: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font sizes using clamp rems for responsive typography - from Figma design */
    /* Desktop: H1=64px, H2=40px, H3=32px, H4=24px, H5=20px, P=16px */
    /* Mobile: H1=44px, H2=32px, H3=28px, H4=24px, H5=20px, P=16px */
    --font-size-50: clamp(0.625rem, 0.5rem + 0.5vw, 0.75rem);
    /* 10-12px */
    --font-size-100: clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem);
    /* 12-14px */
    --font-size-200: clamp(1rem, 0.875rem + 0.5vw, 1rem);
    /* 16px (Paragraph - same on mobile/desktop) */
    --font-size-300: clamp(1.25rem, 1.125rem + 0.5vw, 1.25rem);
    /* 20px (H5 - same on mobile/desktop) */
    --font-size-400: clamp(1.5rem, 1.375rem + 0.5vw, 1.5rem);
    /* 24px (H4 - same on mobile/desktop) */
    --font-size-500: clamp(1.75rem, 1.625rem + 0.5vw, 2rem);
    /* 28-32px (H3: mobile=28px, desktop=32px) */
    --font-size-600: clamp(2rem, 1.875rem + 0.5vw, 2.5rem);
    /* 32-40px (H2: mobile=32px, desktop=40px) */
    --font-size-700: clamp(2.75rem, 2.5rem + 1vw, 4rem);
    /* 44-64px (H1: mobile=44px, desktop=64px) */
    --font-size-800: clamp(2.75rem, 2.5rem + 1vw, 4rem);
    /* Alias for H1 */
    --font-size-900: clamp(2.75rem, 2.5rem + 1vw, 4rem);
    /* Alias for H1 */

    --line-height-xs: 1.25;
    --line-height-sm: 1.5;

    /* Font size variables */
    --font-size-md: 1.25rem;

    /* Gray scale - from Figma design */
    --white: #FFFFFF;
    --gray-50: #FAFAFA;
    --gray-100: #F7F7F7;
    --gray-200: #EFEFEF;
    --gray-300: #DADADA;
    --gray-400: #B8B8B8;
    --gray-500: #999999;
    --gray-600: #666666;
    --gray-700: #4A4A4A;
    --gray-800: #333333;
    --gray-900: #1A1A1A;
    --gray-1000: #000000;

    /* Brand Primary - from Figma design */
    --blue-50: #EBF5FB;
    --blue-100: #D4EFFC;
    --blue-200: #A8D9F5;
    --blue-300: #7CC3EE;
    --blue-400: #3E8FBF;
    --blue-500: #145C95;
    --blue-600: #104A78;
    --blue-700: #0D395B;
    --blue-800: #09283E;
    --blue-900: #051621;

    /* Brand Secondary (Green) - from Figma design */
    --green-50: #F0F9F2;
    --green-100: #E1F4E5;
    --green-200: #B8E5C0;
    --green-300: #8FD69B;
    --green-400: #66C776;
    --green-500: #39B54A;
    --green-600: #2E913B;
    --green-700: #226D2C;
    --green-800: #17491E;
    --green-900: #0B240F;

    /* Accent Primary (Orange) - from Figma design */
    --orange-50: #FEF3EE;
    --orange-100: #FDE7DD;
    --orange-200: #FBCFBB;
    --orange-300: #F9B799;
    --orange-400: #F79E77;
    --orange-500: #F26522;
    --orange-600: #C2511B;
    --orange-700: #913D14;
    --orange-800: #61280E;
    --orange-900: #301407;

    --success-50: var(--green-50);
    --success-100: var(--green-100);
    --success-500: var(--green-500);
    --success-700: var(--green-700);
    --warning-50: #FFFBEB;
    --warning-100: #FEF3C7;
    --warning-500: #F59E0B;
    --warning-700: #B45309;
    --destructive-50: #FEF2F2;
    --destructive-100: #FEE2E2;
    --destructive-500: #EF4444;
    --destructive-700: #B91C1C;

    /* Background colors - from Figma design */
    --background-page: var(--gray-50);
    --background-section-alt: var(--gray-200);
    --background-elevated: var(--white);
    --background-inverse: var(--gray-900);
    --background-blue: var(--blue-700);
    --background-overlay: #00000099;
    --background-accent-sky: var(--blue-50);
    --background-accent-mint: var(--green-50);
    --background-accent-peach: var(--orange-50);

    /* Text colors - from Figma design */
    --text-heading-hero: var(--blue-700);
    --text-heading-primary: var(--blue-500);
    --text-heading-secondary: var(--blue-800);
    --text-heading-tertiary: var(--blue-700);
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-500);
    --text-disabled: var(--gray-400);
    --text-inverse: var(--white);
    --text-link: var(--blue-500);
    --text-link-hover: var(--blue-700);
    --text-on-blue: var(--white);
    --text-on-sky: var(--blue-700);
    --text-on-mint: var(--green-700);
    --text-on-peach: var(--orange-700);

    /* Border colors - from Figma design */
    --border-default: var(--gray-300);
    --border-subtle: var(--gray-200);
    --border-strong: var(--gray-400);
    --border-inverse: var(--gray-600);
    --border-focus: var(--blue-400);

    /* Button action colors - matching Figma design */
    --action-primary-bg: var(--blue-500);
    --action-primary-bg-hover: var(--orange-500);
    --action-primary-bg-active: var(--orange-600);
    --action-primary-text: var(--white);

    --action-primary-default: var(--action-primary-bg);
    --action-primary-hover: var(--action-primary-bg-hover);
    --action-secondary-bg: var(--white);
    --action-secondary-bg-hover: var(--blue-100);
    --action-secondary-bg-active: var(--gray-200);
    --action-secondary-text: var(--blue-500);
    --action-tertiary-text: var(--blue-500);
    --action-tertiary-text-hover: var(--blue-700);
    --action-tertiary-underline: var(--blue-500);
    --action-ghost-bg-hover: var(--gray-100);
    --action-ghost-text: var(--gray-800);
    --action-disabled-bg: var(--gray-200);
    --action-disabled-text: var(--gray-400);
    --action-disabled-border: var(--gray-300);

    /* Additional color variables for secondary buttons */
    --color-action-secondary-default: var(--green-500);
    --color-action-secondary-hover: var(--green-600);
    --color-action-secondary-text: var(--white);

    /* Navigation variables */
    --nav-bg: var(--white);
    --nav-text: var(--gray-800);
    --nav-text-hover: var(--blue-500);
    --nav-text-active: var(--blue-500);
    --nav-border-bottom: var(--gray-300);
    --nav-dropdown-bg: var(--white);
    --nav-dropdown-shadow: rgba(0, 0, 0, 0.10);

    --feedback-success-bg: var(--success-50);
    --feedback-success-border: var(--success-500);
    --feedback-success-text: var(--success-700);
    --feedback-success-icon: var(--success-500);
    --feedback-warning-bg: var(--warning-50);
    --feedback-warning-border: var(--warning-500);
    --feedback-warning-text: var(--warning-700);
    --feedback-warning-icon: var(--warning-500);
    --feedback-error-bg: var(--destructive-50);
    --feedback-error-border: var(--destructive-500);
    --feedback-error-text: var(--destructive-700);
    --feedback-error-icon: var(--destructive-500);
    --feedback-info-bg: var(--blue-100);
    --feedback-info-border: var(--blue-500);
    --feedback-info-text: var(--blue-700);
    --feedback-info-icon: var(--blue-500);

    /* Aliases for Gravity Forms / forms and generic component use */
    --background-primary: var(--background-elevated);
    --text-default: var(--text-primary);
    --text-heading: var(--text-heading-primary);
    --text-muted: var(--text-tertiary);
    --text-on-action: var(--action-primary-text);

    /* Shadows - semantic use in cards, modals, dropdowns */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 2px 8px rgba(0, 0, 0, 0.2);

    /* Subtle background for placeholders / alternate surfaces */
    --background-subtle: var(--gray-100);

    /* Overlay / opacity-based (for link hover, inverse text, overlays) */
    --background-link-hover: rgba(21, 43, 55, 0.2);
    --text-inverse-muted: rgba(255, 255, 255, 0.75);
    --background-overlay-light: rgba(255, 255, 255, 0.1);
    --background-elevated-95: rgba(255, 255, 255, 0.95);
    --border-overlay: rgba(0, 0, 0, 0.5);

    /* Aliases for legacy/PascalCase refs (map to semantic tokens) */
    --Text-Brand-Default: var(--text-primary);
    --Text-Default-Secondary: var(--text-secondary);
    --Text-Default-Default: var(--text-primary);
}