:root {
  /* Spacing */
  --space-3xs: clamp(0.25rem, 0.2255rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4511rem + 0.2174vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6766rem + 0.3261vw, 0.9375rem);
  --space-s: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3533rem + 0.6522vw, 1.875rem);
  --space-l: clamp(2rem, 1.8043rem + 0.8696vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7065rem + 1.3043vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6087rem + 1.7391vw, 5rem);
  --space-3xl: clamp(6rem, 5.413rem + 2.6087vw, 7.5rem);

  /* Spacing (one-up pairs) */
  --space-2xs-xs: clamp(0.5rem, 0.3288rem + 0.7609vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.5543rem + 0.8696vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.6576rem + 1.5217vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.1087rem + 1.7391vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.3152rem + 3.0435vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.2174rem + 3.4783vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 2.6304rem + 6.087vw, 7.5rem);

  /* Font sizing */
  --step--2: clamp(0.6944rem, 0.6844rem + 0.0444vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8072rem + 0.1159vw, 0.9rem);
  --step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1193rem + 0.3587vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3156rem + 0.5527vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.5444rem + 0.8161vw, 2.1973rem);
  --step-4: clamp(2.0736rem, 1.8103rem + 1.1704vw, 2.7466rem);
  --step-5: clamp(2.4883rem, 2.1186rem + 1.6433vw, 3.4332rem);
  --step-6: clamp(2.986rem, 2.4751rem + 2.2705vw, 4.2915rem);
}

:root {
  /* Animation Durations */

  /* Micro interactions - Instant feedback */
  --duration-faster: 150ms;

  /* Standard interactions - Most UI elements */
  --duration-fast: 200ms;
  --duration-normal: 300ms;

  /* Considered interactions - Larger movements */
  --duration-slow: 500ms;
  --duration-slower: 750ms;

  /* Expressive interactions - Hero animations */
  --duration-leisurely: 1000ms;

  /* Animation Curves */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

:root {
  --primary-font: Inter, sans-serif;
  --secondary-font: "Playfair Display", serif;

  --section-padding: var(--space-2xl-3xl) var(--space-s-m);

  --color-accent: #3d756a;
  --color-accent-dark: #1e584e;

  --color-text: #555555;
  --color-text-inverse: #fcfcfc;

  --color-surface: #fcfdfd;
  --color-surface-2: #f6f6f6;

  --color-divider: #e0ded8;
  --color-accent-divider: color-mix(
    in srgb,
    var(--color-accent) 50%,
    var(--color-divider)
  );
}