:root {
    --font-heading: 'Lato', sans-serif;
    --font-primary: 'Raleway', sans-serif;
    --p-margin: 1.25rem;

    --color-accent-primary: #009294;
    --color-accent-primary-dark: color-mix(in srgb,var(--color-accent-primary),#000 15%);
    --color-accent-secondary: #FFCD00;
    --color-accent-secondary-dark: color-mix(in srgb,var(--color-accent-secondary),#000 15%);
    --color-text-primary: #364153;
    --color-text-secondary: #2C2C2C;
    --color-text-tertiary: rgb(255, 255, 255, 0.8);
    --color-surface-primary: #FAF7F2;
    --color-surface-secondary: #F0EDE8;
    --color-surface-tertiary: #2C2C2C;
    --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(20px, 2.5vw, 32px);
    --spacing-sm: clamp(32px, 4.5vw, 64px);
    --spacing-md: clamp(56px, 6.8vw, 96px);
    --spacing-lg: clamp(72px, 8.5vw, 120px);

    --container-padding: clamp(24px, 4.6vw, 64px);
    --content-width: calc(1440px + (2 * var(--container-padding)));
    --grid-row-gap: clamp(24px, 2.8vw, 40px);
    --grid-column-gap: clamp(24px, 5vw, 64px);
  }