/* Design tokens. Values come from design/README.md; do not invent new ones. */

:root {
    --color-bg: #f7f7f5;
    --color-surface: #ffffff;
    --color-ink: #16202c;

    /* Reserved for the primary CTA only (spec 8.2). */
    --color-accent: #3b6ea5;
    --color-accent-hover: #2a5484;
    --color-accent-tint: #8fb3d9;

    --color-text: #16202c;
    --color-text-secondary: #4d5866;
    --color-text-muted: #8a8f97;
    --color-text-disabled: #b3b6ba;
    --color-border: #e2e1dc;
    --color-border-input: #d6d5d0;

    --color-on-dark-text: #aeb8c4;
    --color-on-dark-border: #3d4a5a;

    --color-success-bg: #e9f2ea;
    --color-success-border: #9dc3a2;
    --color-success-text: #2b5e33;

    --font-heading: "Space Grotesk", sans-serif;
    --font-body: "IBM Plex Sans", sans-serif;

    --text-h1: 2.875rem;
    --text-h2: 1.75rem;
    --text-h3: 1.0625rem;
    --text-body: 1rem;
    --text-small: 0.8125rem;

    --leading-h1: 1.08;
    --leading-body: 1.6;

    --tracking-h1: -0.02em;
    --tracking-kicker: 0.16em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    --content-max: 1200px;
    --gutter: var(--space-8);
    --measure: 75ch;

    --radius-control: 3px;
    --radius-card: 6px;
    --radius-chip: 99px;

    --tap-target: 44px;
}

@media (min-width: 1024px) {
    :root {
        --text-h1: 3.625rem;
        --text-h2: 2.125rem;
        --text-h3: 1.5rem;
        --text-body: 1.125rem;
    }
}