:root {
    --font-urbanist: 'Urbanist', sans-serif;
    --font-inter: 'Inter', sans-serif;

    --h1-fluid: clamp(2rem, calc(2rem + (4 - 2) * ((100vw - 20rem) / (90 - 20))), 4rem);

    /* palette */
    --color-primary: #5A7388;
    --color-white: #FFFFFF;
    --color-gray-500: #737373;
    --color-gray-200: #DDE1DE;
    --color-gray-900: #212529;
    --color-dark: #000000;
    --color-black: #101010;
    --color-grid: #627C92;
    --color-grid-border: #7792AA;
    --color-charcoal: #201E21;
    --primary-opacity: #72899a;

    /* Opacity */
    --white-rgba: 255, 255, 255;
    --header-border: rgba(255, 255, 255, 0.3);
    --header-bg: rgba(255, 255, 255, 0.1);

    /* semantic */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-gray-500);
    --grey-dark: var(--color-gray-900);

    /* Transition Durations */
    --transition-fast: 0.2s;
    --transition-base: 0.35s;
    --transition-slow: 0.5s;

    /* Transition Timing */
    --ease-default: ease;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Common Transitions */
    --transition-bg: background var(--transition-base) var(--ease-default);
    --transition-color: color var(--transition-base) var(--ease-default);
    --transition-all: all var(--transition-base) var(--ease-default);

    --transition-collapse:
        max-height var(--transition-base) var(--ease-default),
        opacity var(--transition-base) var(--ease-default),
        padding var(--transition-base) var(--ease-default);
}