:root {

  /* ========================
     Fluid Typography Scale
     ======================== */

  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --text-2xl: clamp(2rem, 1.6rem + 1vw, 2.75rem);
  --text-3xl: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  --text-4xl: clamp(3rem, 2.5rem + 2vw, 4.5rem);   /* ~48px → 72px */
  --text-5xl: clamp(3.5rem, 3rem + 3vw, 6rem);     /* ~56px → 96px */
  /* ========================
     Semantic Aliases
     ======================== */
  --heading-xxl: var(--text-4xl);
  --heading-xl: var(--text-3xl);
  --heading-lg: var(--text-2xl);
  --heading-md: var(--text-xl);
  --heading-sm: var(--textlg);
  --body-text: var(--text-base);
  --small-text: var(--text-sm);


  /* ========================
     Layout
     ======================== */

  --container-width: 1200px;
  --container-padding: clamp(16px, 2vw, 32px);

  --section-spacing: clamp(48px, 6vw, 96px);


  /* ========================
     Radius / UI
     ======================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

}