:root {
    --primary-main: #00b6cf;
    --primary-light: #a5d9ff;
    --primary-dark: #19283d;

    --secondary-main: #ffd700;
    --secondary-light: #ffed4e;
    --secondary-dark: #c28001;
}

:root {
    /* 4px 8px 12px 20px 32px 52px 84px */
    --space-unit: 1em;
    --space-xxs: calc(0.25 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
}