@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/bricolage-grotesque-variable.woff2") format("woff2-variations"),
         url("/fonts/bricolage-grotesque-variable.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/jetbrains-mono.woff2") format("woff2");
}

:root {
    color-scheme: light dark;

    /* Display face carries the personality (headlines only, used with
       restraint); body stays on the system stack for speed and neutrality;
       mono is reserved for small data/status text, never headings. */
    --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
    --step-3: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
    --step-4: clamp(2.75rem, 1.9rem + 4vw, 5rem);

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

    --radius: 14px;
    --radius-sm: 8px;
    --border-width: 1px;
    --max-width: 44rem;
    --max-width-wide: 68rem;

    --duration: 180ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root,
:root[data-theme="light"] {
    --bg: #fafaf9;
    --bg-elevated: #ffffff;
    --text: #0c0d10;
    --text-muted: #585b61;
    --border: #e4e3df;
    --accent: #1f5eff;
    --accent-contrast: #ffffff;
    --accent-tint: #eaf0ff;
    --focus-ring: #1f5eff;
    --shadow: 0 1px 2px rgba(12, 13, 16, 0.05), 0 12px 32px rgba(12, 13, 16, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a0a0c;
        --bg-elevated: #141518;
        --text: #edeceb;
        --text-muted: #9a9da3;
        --border: #24262b;
        --accent: #6d8fff;
        --accent-contrast: #0a0a0c;
        --accent-tint: #17203d;
        --focus-ring: #6d8fff;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.45);
    }
}

:root[data-theme="dark"] {
    --bg: #0a0a0c;
    --bg-elevated: #141518;
    --text: #edeceb;
    --text-muted: #9a9da3;
    --border: #24262b;
    --accent: #6d8fff;
    --accent-contrast: #0a0a0c;
    --accent-tint: #17203d;
    --focus-ring: #6d8fff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.45);
}