:root { --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)); --color-dark-text: hsl(var(--color-primary-h), var(--color-primary-s), 12%); --color-light-background: hsl(0, 0%, 100%); --color-light-text: var(--color-light-background); --color-action: hsl(var(--color-action-h), var(--color-action-s), var(--color-action-l)); --color-accent-1: #416893; --color-accent-2: #233958; --color-accent-3: hsl(var(--color-action-h) var(--color-action-s) 36%); --color-accent-4: #3D7F6A; --color-secondary: hsl(353, 81%, 51%); --color-light-md-background: hsl(var(--color-action-h), 78%, 97%); --spacing-page-margin: clamp(12px, -14.6087px + 7.3913vw, 80px); --spacing-section-y: clamp(32px, 0.87vw + 1.804rem, 40px); --spacing-section-y-lg: calc(var(--spacing-section-y) * 2); --spacing-xxs: calc(var(--spacing-xs) / 2); --spacing-xs: 8px; --spacing-sm: calc(var(--spacing-xs) * 2); --spacing-md: calc(var(--spacing-xs) * 3); --spacing-ml: calc(var(--spacing-xs) * 5); --spacing-lg: calc(var(--spacing-xs) * 10); --spacing-xl: calc(var(--spacing-xs) * 13); --spacing-gap-container: var(--spacing-ml); --spacing-gap-section: calc(var(--spacing-section-y) + var(--spacing-md)); --spacing-gap-cards: var(--spacing-sm); --spacing-gap-hgroup: var(--spacing-xxs);}