/* Design tokens — single source: docs/02-design-system.md §2.
   Never hardcode a value that has a token (docs/CONVENTIONS.md §5).
   Breakpoints (not expressible as vars): 767px mobile switch, 1024px tablet. */

:root {
    /* Color */
    --green: rgb(145 196 1);
    --green-dark: rgb(116 157 1);
    --green-mid: rgb(213 232 158);
    --green-light: rgb(241 247 224);
    --primary: rgb(42 61 78);
    --secondary: rgb(85 100 113);
    --bg-dark: rgb(36 57 77);
    --grey: rgb(181 194 200);
    --neutral-200: rgb(245 247 249);
    --neutral-400: rgb(235 240 244);
    --neutral-600: rgb(233 237 239);
    --neutral-800: rgb(209 223 229);
    /* Form errors. Neither the export nor 02-design-system.md §2 defines a
       red — the export has no error state at all — so this is the one added
       colour: dark enough for AA text on the white form card (≈6.4:1). */
    --error: rgb(190 40 40);
    --white: #fff;
    --white-transparent: rgb(255 255 255 / .86);

    /* Typography (desktop → mobile fluid) */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --text-h1: clamp(32px, 24.5px + 2vw, 48px);
    --text-h2: clamp(24px, 20.25px + 1vw, 32px);
    --text-h3: 24px;
    --text-h4: 20px;
    --text-lg: 18px;
    --text-base: clamp(16px, 1.6vw + 12px, 18px);
    --text-sm: 14px;
    --text-xs: 12px;
    --text-button: 16px;
    --text-input: 16px;
    --text-menu: 18px;
    --text-lead: clamp(18px, 17.3px + 0.2vw, 20px);
    --eyebrow-tracking: 5px;

    /* Space & size (4/8 px rhythm) */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-36: 36px;
    --space-40: 40px;
    --space-56: 56px;
    --section-pad: clamp(104px, 62.6px + 8.64vw, 176px);
    --section-pad-sm: clamp(48px, 20.4px + 5.76vw, 96px);
    --container-max: 1312px;
    --page-max: 1360px;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Motion */
    --motion-micro: 0.14s;
    --motion-reveal: 400ms;
    --motion-step: 250ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-morph: ease-in-out;
}

@media (max-width: 767px) {
    :root {
        --radius-sm: 6px;
        --radius-lg: 12px;
    }
}