/**
 * Design tokens — Figma style guide (style for new site)
 */
:root {
    /* Brand — Blue */
    --brand-main: #006CB3;
    --brand-hover: #2D86C8;
    --brand-pressed: #246DA2;
    --brand-accent: #36A1F0;
    --brand-light: #E8F3FB;
    --brand-muted: #D8EAF7;
    --brand-border: #C8E3F6;

    /* Surfaces */
    --bg-page: #FFFFFF;
    --bg-alt: #F7FCFF;
    --bg-muted: #F4F8FC;
    --surface: #FFFFFF;

    /* Text */
    --text-primary: #0B263A;
    --text-secondary: #133C5B;
    --text-muted: #246DA2;
    --text-on-brand: #FFFFFF;

    /* Neutral */
    --neutral-500: #959CA5;
    --neutral-700: #616971;

    /* Typography */
    --font-body: 'Inter', Verdana, sans-serif;
    --font-heading: 'Inter', Verdana, sans-serif;

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: clamp(2rem, 3.5vw, 3rem);
    --text-4xl: clamp(2.25rem, 4.5vw, 3.5rem);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(11, 38, 58, 0.04);
    --shadow-sm: 0 2px 8px rgba(11, 38, 58, 0.06);
    --shadow-md: 0 8px 24px rgba(11, 38, 58, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 108, 179, 0.12);
    --shadow-card: 0 4px 20px rgba(11, 38, 58, 0.07);

    /* Layout */
    --container-max: 1200px;
    --header-height: 72px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 180ms;
    --duration-normal: 320ms;
}