/* Shared design tokens. Component files consume these values. */
:root {
    --black: #111111;
    --white: #ffffff;
    --grey: #a7a7a7;
    --grey-dark: #212121;
    --primary: #2b4d8a;
    --primary-hover: #355eaa;
    --surface-muted: #3c3c3c;
    --surface-hover: #505050;
    --paper: #f5f4f2;
    --paper-muted: #747474;
    --line-on-light: rgba(0, 0, 0, .15);
    --white-muted: rgba(255, 255, 255, .6);
    --line: rgba(255, 255, 255, .16);
    --overlay: rgba(0, 0, 0, .28);
    --focus: #b8d1ff;
    --radius: 5px;
    --space-xxl: 11.25rem;
    --space-xl: 7.5rem;
    --space-l: 3.75rem;
    --space-m: 1.875rem;
    --space-s: .9375rem;
    --space-xs: .4rem;
    --space-xxs: .25rem;
    --gutter: clamp(1rem, 1.2vw, 1.875rem);
    --panel-padding: clamp(1rem, 1.32vw, 1.25rem);
    --grid-gap: clamp(1rem, 1.6vw, 1.875rem);
    --section-gap: clamp(3.5rem, 5.2vw, 5rem);
    --header-height: 4rem;
    --button-height: 2.25rem;
    --button-height-large: 3.875rem;
    --duration-fast: 180ms;
    --duration: 320ms;
    --duration-slow: 800ms;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 900px) {
    :root {
        --header-height: 3.75rem;
        --button-height: 2.75rem;
        --button-height-large: 3.25rem;
    }

}