/*
 * Design tokens: the only place colours are written down
 * (TemplateConventionsTest refuses hex colours anywhere else).
 * See docs/ux/design-system.md.
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal-Gz7AlRl.woff2") format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal-ZHdaFJ8.woff2") format('woff2');
}

:root {
    color-scheme: light;

    --color-canvas: #F5F8FA;
    --color-surface: #FFFFFF;
    --color-surface-sunken: #ECF2F6;
    /* A scanned document is drawn on white in both themes, as it was printed. */
    --color-paper: #FFFFFF;
    --color-ink: #10202B;
    --color-muted: #55636E;
    --color-border: #DAE3EA; /* dividers only (1.3:1): never the outline of a control */
    --color-border-strong: #A3B2BD;
    --color-border-input: #768591; /* controls: 3.79:1 on white, 3.56:1 on canvas */
    --color-primary: #0A6FA8; /* cerulean: 5.45:1 with white */
    --color-primary-strong: #08598A;
    --color-primary-tint: #E2F1FA;
    --color-on-primary: #FFFFFF;
    --color-on-danger: #FFFFFF;
    --color-accent: #FF9F1C; /* tangerine: never text */
    --color-success: #1F7A48;
    --color-success-tint: #ECFDF3;
    --color-warning: #B54708;
    --color-star: var(--color-warning); /* a rating's drawn stars: tangerine family, readable as text */
    --color-warning-tint: #FFFAEB;
    --color-danger: #B42318;
    --color-danger-strong: #912018;
    --color-danger-tint: #FEF3F2;
    --color-info: #0A6FA8;
    --color-info-tint: #E2F1FA;
    --color-scrim: rgb(16 32 43 / 0.45);

    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', var(--font-body);
    /* Plus Jakarta Sans draws its word space at 0.17em (Inter's is 0.28em), so
       headings read as one word ("Howitworks") without this. */
    --heading-word-spacing: 0.1em;

    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
    --text-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.125rem);
    /* The public home page's section titles and its one headline (04-landing.css). */
    --text-4xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
    --text-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgb(16 32 43 / 0.06), 0 1px 3px rgb(16 32 43 / 0.08);
    --shadow-2: 0 4px 12px rgb(16 32 43 / 0.08), 0 2px 4px rgb(16 32 43 / 0.06);
    --shadow-3: 0 16px 40px rgb(16 32 43 / 0.16);

    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 320ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    --tap: 44px;
    /* Two-tone: ink outline (15:1) inside a tangerine halo, visible on any surface. */
    --focus-ring: 0 0 0 4px var(--color-accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;

        --color-canvas: #0B141B;
        --color-surface: #132029;
        --color-surface-sunken: #0F1A22;
        --color-ink: #E6EEF3;
        --color-muted: #9FB0BC;
        --color-border: #22333F;
        --color-border-strong: #435766;
        --color-border-input: #677C8A;
        --color-primary: #5BB8F0;
        --color-primary-strong: #8CCDF5;
        --color-primary-tint: #123247;
        --color-on-primary: #0B141B;
        --color-on-danger: #0B141B;
        --color-success: #5CC08A;
        --color-success-tint: #143324;
        --color-warning: #F0A15C;
        --color-warning-tint: #3A2512;
        --color-danger: #F07A6E;
        --color-danger-strong: #F5A69D;
        --color-danger-tint: #3D1A16;
        --color-info: #5BB8F0;
        --color-info-tint: #123247;
        --color-scrim: rgb(0 0 0 / 0.6);
    }
}

:root[data-theme='dark'] {
    color-scheme: dark;

    --color-canvas: #0B141B;
    --color-surface: #132029;
    --color-surface-sunken: #0F1A22;
    --color-ink: #E6EEF3;
    --color-muted: #9FB0BC;
    --color-border: #22333F;
    --color-border-strong: #435766;
    --color-border-input: #677C8A;
    --color-primary: #5BB8F0;
    --color-primary-strong: #8CCDF5;
    --color-primary-tint: #123247;
    --color-on-primary: #0B141B;
    --color-on-danger: #0B141B;
    --color-success: #5CC08A;
    --color-success-tint: #143324;
    --color-warning: #F0A15C;
    --color-warning-tint: #3A2512;
    --color-danger: #F07A6E;
    --color-danger-strong: #F5A69D;
    --color-danger-tint: #3D1A16;
    --color-info: #5BB8F0;
    --color-info-tint: #123247;
    --color-scrim: rgb(0 0 0 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
        --motion-slow: 0ms;
    }
}