:root {
    /* color */
    --color-primary: #004890;
    --color-primary-dark: #002d5a;
    --color-accent: #E9A624;
    --color-ink: #131928;
    --color-ink-soft: #3d4f6e;
    --color-bg: #FFFFFF;
    --color-bg-alt: #FAF7F1;
    --color-border: #EDE8DF;

    /* font */
    --font-display: "Oswald", Impact, sans-serif;
    --font-text: "Quicksand", Arial, sans-serif;

    /* fontSize */
    --fs-h1: 3rem;
    --fs-h1-mobile: 2.25rem;
    --fs-h2: 2.25rem;
    --fs-h2-mobile: 1.75rem;
    --fs-h3: 1.5rem;
    --fs-body: 1.125rem;
    --fs-eyebrow: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    --fs-small: 0.875rem;

    /* lineHeight */
    --lh-heading: 1.15;
    --lh-body: 1.6;

    /* space */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;

    /* radius */
    --radius-base: 8px;
    --radius-card: 8px;
    --radius-media: 8px;

    /* shadow */
    --shadow-card: 0 14px 45px rgba(19, 25, 40, 0.08);
    --shadow-hover: 0 18px 52px rgba(19, 25, 40, 0.14);

    /* layout */
    --layout-content: 1180px;
    --layout-wide: 1640px;
    --layout-container: min(calc(100% - 36px), var(--layout-content));
    --layout-copy: 65ch;
    --layout-grid-gap: var(--space-4);
    --layout-menu: 760px;

    /* section */
    --section-padding: var(--space-7);
    --section-padding-mobile: var(--space-6);

    /* component */
    --component-button-height: 48px;
    --component-card-padding: var(--space-5);
    --component-form-field-padding: 14px 16px;
    --component-brand-width: clamp(230px, 22vw, 300px);
    --component-brand-width-mobile: min(220px, calc(100vw - 96px));
    --component-proof-number-size: 1.75rem;

    /* motion */
    --motion-fast: 180ms;
    --motion-standard: 220ms;
    --motion-ease-standard: cubic-bezier(.2, .8, .2, 1);

    /* breakpoint */
    --breakpoint-mobile: 680px;
    --breakpoint-tablet: 980px;

    --radius: var(--radius-base);
    --body-max-width: var(--layout-copy);
}

@media (max-width: 620px) {
    :root {
        --section-padding: var(--section-padding-mobile, var(--space-6));
    }
}