:root {
    --font-heading: 'PT Sans', sans-serif;
    --font-primary: Roboto, sans-serif;

    --color-accent-primary: #02b0ae;
    --color-accent-primary-dark: color-mix(in srgb,var(--color-accent-primary),#000 15%);
    --color-accent-secondary: #02b0ae;
    --color-accent-secondary-dark: color-mix(in srgb,var(--color-accent-secondary),#000 15%);
    --color-text-primary: #364153;
    --color-text-secondary: #364153;
    --color-text-tertiary: #e8e8e8;
    --color-surface-primary: #FAF7F2;
    --color-surface-secondary: #F0EDE8;
    --color-surface-tertiary: #0c0c0c;
    --color-white: #fff;
    --color-grey-100: #F7F7F8;
    --color-grey-200: #EAEAEA;
    --color-grey-400: #D9D9D9;
    --color-grey-600: #C3C1C1;
    --color-grey-700: #494949;
    --color-grey-800: #2A2D31;
    --color-black: #000;

    --spacing-xs: clamp(24px, 4vw, 40px);
    --spacing-sm: clamp(32px, 6vw, 60px);
    --spacing-md: clamp(40px, 8vw, 80px);
    --spacing-lg: clamp(60px, 12vw, 120px);

    --container-padding: clamp(20px, 6.25vw, 120px);
    --content-width: calc(1440px + (2 * var(--container-padding)));
    --grid-row-gap: clamp(1.25rem, 4vw, 2.5rem);
    --grid-column-gap: clamp(0.75rem, 3vw, 1.25rem);
  }