/* Standard base font-size for rem calculations */
html {
  font-size: 16px;
}

:root {
  /* Brand Colors */
  --color-primary: #F9A01B; /* Orange */
  --color-secondary: #283892; /* Blue */
  --color-text-dark: #333333;
  --color-text-light: #666666;
  --color-text-white: #FFFFFF;
  --color-bg-light: #FFFFFF;
  --color-bg-offwhite: #F9FAFB;
  --color-bg-dark: #1F2937;

  /* Typography */
  --font-family-base: 'Onest', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Onest', system-ui, -apple-system, sans-serif;

  /* Static Font Sizes (for fallback/reference) */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 3rem;     /* 48px */

  /* ==========================================================================
     FLUID TYPOGRAPHY SCALE (320px to 1440px viewport)
     Based on industry standards from responsive-typography-spacing-standards.md
     Using rem for accessibility (respects user font preferences)
     ========================================================================== */
  --fluid-h1: clamp(1.75rem, 1.25rem + 2.5vw, 4rem);       /* 28px → 64px */
  --fluid-h2: clamp(1.5rem, 1rem + 2vw, 3rem);             /* 24px → 48px */
  --fluid-h3: clamp(1.25rem, 1rem + 1.25vw, 2rem);         /* 20px → 32px */
  --fluid-h4: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);     /* 18px → 24px */
  --fluid-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16px → 18px */
  --fluid-body-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);/* 18px → 22px */
  --fluid-small: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);    /* 14px → 16px */
  --fluid-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);   /* 12px → 14px */
  --fluid-input: max(1rem, 0.95rem + 0.25vw);              /* 16px min (prevents iOS zoom) */

  /* Line Heights (unitless for accessibility) */
  --line-height-tight: 1.15;    /* Headings */
  --line-height-snug: 1.4;      /* Subtitles */
  --line-height-normal: 1.5;    /* Body text (WCAG minimum) */
  --line-height-relaxed: 1.6;   /* Long-form content */

  /* ==========================================================================
     STATIC SPACING SCALE (for fixed dimensions)
     ========================================================================== */
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-24: 6rem;     /* 96px */

  /* ==========================================================================
     FLUID SPACING SCALE (for responsive spacing)
     Based on 8px grid, scales from 320px to 1440px viewport
     ========================================================================== */
  --fluid-space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);   /* 4px → 8px */
  --fluid-space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);       /* 8px → 16px */
  --fluid-space-md: clamp(1rem, 0.75rem + 1.25vw, 2rem);       /* 16px → 32px */
  --fluid-space-lg: clamp(1.5rem, 1rem + 2.5vw, 4rem);         /* 24px → 64px */
  --fluid-space-xl: clamp(2rem, 1.5rem + 2.5vw, 5rem);         /* 32px → 80px */
  --fluid-section: clamp(3rem, 2rem + 5vw, 7.5rem);            /* 48px → 120px */

  /* Border Radius - using rem for proportional scaling */
  --radius-default: 1.25rem;  /* 20px at base, scales proportionally */
  --radius-sm: 0.25rem;       /* 4px at base */
  --radius-md: 0.5rem;        /* 8px at base */
  --radius-lg: 0.75rem;       /* 12px at base */
  --radius-full: 9999px;      /* Keep fixed for pills/circles */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;

  /* ==========================================================================
     STANDARD BREAKPOINTS (consolidated from 17 to 5)
     For reference - cannot be used as CSS variables in media queries
     ========================================================================== */
  /*
     375px   - Mobile (small phones, iPhone SE)
     768px   - Tablet (two-column layouts, navigation changes)
     1024px  - Desktop (full layouts, desktop navigation)
     1280px  - Large (timeline row layout, expanded content)
     1440px  - XL (footer 3-column, maximum font sizes)
  */
}

/* Mobile Border Radius Override (768px and below) */
@media (max-width: 768px) {
  :root {
    --radius-default: 0.625rem;  /* 10px at base for mobile */
  }
}