:root {
    --primary-red: hsl(0, 78%, 62%);
    --primary-cyan: hsl(180, 62%, 55%);
    --primary-orange: hsl(34, 97%, 64%);
    --primary-blue: hsl(212, 86%, 64%);

    --neutral-dark: hsl(234, 12%, 34%);
    --neutral-medium: hsl(212, 6%, 44%);
    --neutral-light: hsl(0, 0%, 100%);
    --neutral-bg: hsl(0, 0%, 98%);

    --font-family: 'Poppins', sans-serif;
    --font-weight-light: 200;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;

    --base-unit: 0.875rem;
    --spacing-xs: calc(var(--base-unit) * 0.5);
    --spacing-sm: calc(var(--base-unit) * 0.75);
    --spacing-md: calc(var(--base-unit) * 1);
    --spacing-lg: calc(var(--base-unit) * 1.5);
    --spacing-xl: calc(var(--base-unit) * 2);
    --spacing-xxl: calc(var(--base-unit) * 3.75);

    --border-radius: calc(var(--base-unit) * 0.5);
    --border-width: calc(var(--base-unit) * 0.25);
    --box-shadow: 0 calc(var(--base-unit) * 0.625) calc(var(--base-unit) * 1.25) rgba(0, 0, 0, 0.1), 0 calc(var(--base-unit) * 0.375) calc(var(--base-unit) * 0.375) rgba(0, 0, 0, 0.05);
}