:root {
  --font-family-sans: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;

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

  /* Fluid Type Scale - Minor Third (mobile) to Perfect Fourth (desktop) */
  /* Based on fluid type scale calculator, rounded to nice numbers for screen display */
  --step--2: clamp(0.5625rem, 0.75rem + -0.24vw, 0.6875rem);
  /* 9px - 11px */
  --step--1: clamp(0.75rem, 0.875rem + -0.15vw, 0.8125rem);
  /* 12px - 13px */
  --step-0: clamp(1rem, 1rem + 0vw, 1rem);
  /* 16px */
  --step-1: clamp(1.2rem, 1.15rem + 0.24vw, 1.3125rem);
  /* 19px - 21px */
  --step-2: clamp(1.4375rem, 1.3rem + 0.61vw, 1.75rem);
  /* 23px - 28px */
  --step-3: clamp(1.75rem, 1.5rem + 1.16vw, 2.375rem);
  /* 28px - 38px */
  --step-4: clamp(2rem, 1.625rem + 1.97vw, 3.125rem);
  /* 32px - 50px */
  --step-5: clamp(2.5rem, 1.8rem + 3.13vw, 4.25rem);
  /* 40px - 68px */

  /* Legacy fixed font sizes (kept for backward compatibility) */
  --font-size-50: 12px;
  --font-size-100: 14px;
  --font-size-200: 16px;
  --font-size-300: 22px;
  --font-size-400: 28px;
  --font-size-500: 38px;
  --font-size-600: 48px;
  --font-size-700: 68px;
  --font-size-800: 64px;
  --font-size-900: 72px;

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

  --border-radius-0: 0;
  --border-radius-100: .25rem;
  --border-radius-200: .5rem;
  --border-radius-400: 1rem;
  --border-radius-full: 999px;

  --gray-50: #FCFCFC;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #1E1A1B;
  --gray-900: #000000;

  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #F87171;
  --red-400: #EF4444;
  --red-500: #B92732;
  --red-600: #8B1525;
  --red-700: #70111C;
  --red-800: #550D16;
  --red-900: #3A0910;

  --feedback-red-50: #FEF2F2;
  --feedback-red-100: #FEE2E2;
  --feedback-red-500: #EF4444;
  --feedback-red-700: #B91C1C;

  --feedback-orange-50: #FFFBEB;
  --feedback-orange-100: #FEF3C7;
  --feedback-orange-500: #F59E0B;
  --feedback-orange-700: #B45309;

  --feedback-green-50: #F0FDF4;
  --feedback-green-100: #DCFCE7;
  --feedback-green-500: #22C55E;
  --feedback-green-700: #15803D;

  --background-primary: var(--gray-50);
  --background-secondary: var(--gray-100);
  --background-tertiary: var(--gray-200);
  --background-inverse: var(--gray-800);

  --border-default: var(--gray-400);
  --border-strong: var(--gray-700);
  --border-interactive: var(--red-500);
  --border-interactive-hover: var(--red-600);

  --text-default: var(--gray-800);
  --text-heading: var(--gray-900);
  --text-inverse: var(--gray-50);
  --text-muted: var(--gray-600);
  --text-link: var(--red-500);
  --text-on-action: var(--gray-50);

  --action-primary: var(--red-500);
  --action-primary-hover: var(--red-600);
  --action-primary-text: var(--gray-50);

  --action-secondary: var(--gray-50);
  --action-secondary-hover: var(--gray-400);
  --action-secondary-text: var(--gray-900);

  --feedback-success-bg: var(--feedback-green-50);
  --feedback-success-text: var(--feedback-green-700);
  --feedback-destructive-bg: var(--feedback-red-50);
  --feedback-destructive-text: var(--feedback-red-700);

  --focus-outline-color: #109cde;

  /* Header layout (Figma 1280px canvas) */
  --header-max-width: 1280px;
  --header-inline-inset: clamp(1.25rem, 4.6875vw, 3.75rem);
  --header-secondary-height: 3rem;
  --header-primary-min-height: 7rem;
  --header-nav-item-gap: 2rem;
  --header-secondary-link-gap: 1.5rem;
  --header-logo-max-width: 14.1875rem;
  --header-mobile-logo-max-width: 6rem;
  --header-mobile-logo-height: 3.875rem;
  --header-mobile-nav-height: 3.125rem;
  --header-mobile-row-padding: 1.5rem;
  --header-mobile-offset: calc(var(--header-mobile-row-padding) + max(var(--header-mobile-logo-height), var(--header-mobile-nav-height)));
  --header-total-offset: calc(var(--header-secondary-height) + var(--header-primary-min-height));
  --header-sticky-height: 4rem;
  --header-sticky-logo-height: 2rem;
  --header-sticky-logo-max-width: 15.8125rem;
  --header-mobile-sticky-logo-height: 3.5rem;
  --header-mobile-sticky-logo-max-width: 5.375rem;
}