:root {
    --primary: #27bfc7;
    --primary-dark: #23ACB3;
    --primary-darker: #0A7F8A;
    --text-primary: #1F487E;
    --text-secondary: #303030;
    --light-gray: #a0b3c5;
    --off-white: #E0E6EC;
    --cta: #3498DB;
    --cta-hover: #2283c3;
    --red: #FF6F59;
    --yellow: #FFDD59;

    --filter-light: rgba(255, 255, 255, 0.5);
    --filter-dark: rgba(0, 0, 0, 0.35);

    --heading-regular: 'Montserrat-regular', sans-serif;
    --heading-bold: 'Montserrat-bold', sans-serif;
    --text-regular: 'Roboto-regular', sans-serif;
    --text-bold: 'Roboto-bold', sans-serif;
    --text-extra-bold: 'Roboto-extra-bold', sans-serif;
    --text-italic: 'Roboto-italic', sans-serif;

    --line-height-heading: 1.2;
    --line-height-text: 1.5;

    --font-weight-heading: 500;

    --font-size-large: clamp(1.5rem, 0.5909rem + 4.5455vw, 4rem);
    --font-size-heading: clamp(1.1rem, 0.9545rem + 0.7273vw, 1.5rem);
    --font-size-regular: clamp(1rem, 0.9636rem + 0.1818vw, 1.1rem);
    --font-size-small: clamp(0.85rem, 0.7955rem + 0.2727vw, 1rem);
    --font-size-tiny: clamp(0.75rem, 0.6591rem + 0.4545vw, 1rem);
    --font-size-price: 2.2rem;

    --box-shadow-white: 0 0 8px var(--light-gray);
    --box-shadow-primary: 0 0 8px var(--primary-darker);
    --box-shadow-primary-offset: 0 2px 2px var(--primary-darker);
    --box-shadow-cta: 0 2px 8px var(--light-gray);

    --radius-1: 20px;
    --radius-btn: 2rem;

    --gradient-primary: linear-gradient(to bottom, var(--primary), var(--primary-dark));

    --border-gray: var(--light-gray) 1px solid;

    --button-transition: transform 200ms ease, background-color 200ms ease;
}