/* =========================================================================
   ProSeg · Design Tokens
   Single source of truth for color, space, type, radius and elevation.
   Every other stylesheet consumes these variables and never hardcodes
   a value that exists here.
   ========================================================================= */

:root {
    /* ---------- Brand · blues ---------- */
    --navy-950: #070e1a;
    --navy-900: #0b1526;

    --blue-700: #1639ab;
    --blue-600: #1b4de4;
    --blue-500: #2e63f5;
    --blue-400: #5b86f8;
    --blue-200: #c3d3fe;
    --blue-100: #e6edfe;
    --blue-50: #f2f6ff;

    /* ---------- Accent · energy ---------- */
    --amber-600: #b26a00;
    --amber-500: #f5a524;
    --amber-100: #fdf0d5;

    /* ---------- Semantic status ---------- */
    --green-600: #0f8a5f;
    --green-500: #17b980;
    --green-100: #dcf5eb;
    --red-600: #c62b30;
    --red-500: #e5484d;
    --red-100: #fce4e5;

    /* ---------- Neutrals ---------- */
    --white: #ffffff;
    --canvas: #f7f9fc;
    --surface: #ffffff;
    --line: #e4e9f0;
    --line-strong: #d3dbe6;

    --text: #0b1526;
    --text-soft: #4a5a70;
    --text-mute: #64748b;
    --text-invert: #ffffff;
    --text-invert-soft: #a9b8ce;
    --text-invert-mute: #8296b0;

    /* ---------- Surfaces ---------- */
    --bg-body: var(--canvas);
    --bg-dark: var(--navy-900);
    --bg-dark-deep: var(--navy-950);

    /* ---------- Spacing scale (4px base) ---------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 2rem;
    --sp-8: 2.5rem;
    --sp-9: 3rem;
    --sp-10: 5rem;

    /* ---------- Vertical rhythm for sections ---------- */
    --section-y: clamp(4rem, 9vw, 7.5rem);

    /* ---------- Radius ---------- */
    --r-xs: 0.375rem;
    --r-sm: 0.5rem;
    --r-md: 0.75rem;
    --r-lg: 1.125rem;
    --r-full: 999px;

    /* ---------- Elevation (deliberately soft) ---------- */
    --shadow-sm: 0 1px 3px rgba(11, 21, 38, 0.08), 0 1px 2px rgba(11, 21, 38, 0.04);
    --shadow-md: 0 12px 28px -14px rgba(11, 21, 38, 0.22);
    --shadow-lg: 0 28px 60px -28px rgba(11, 21, 38, 0.38);
    --shadow-focus: 0 0 0 3px rgba(46, 99, 245, 0.35);

    /* ---------- Typography ---------- */
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
        Consolas, "Liberation Mono", monospace;

    --fs-display: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem);
    --fs-h1: clamp(2rem, 1.45rem + 2.2vw, 3rem);
    --fs-h2: clamp(1.75rem, 1.32rem + 1.7vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
    --fs-h4: 1.0625rem;
    --fs-lead: clamp(1.0625rem, 1.01rem + 0.3vw, 1.1875rem);
    --fs-body: 1rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-eyebrow: 0.75rem;

    --lh-tight: 1.06;
    --lh-snug: 1.2;
    --lh-title: 1.25;
    --lh-body: 1.7;
    --lh-loose: 1.65;

    --tracking-tight: -0.028em;
    --tracking-snug: -0.018em;
    --tracking-normal: 0;
    --tracking-eyebrow: 0.14em;

    /* ---------- Layout ---------- */
    --container: 1180px;
    --container-narrow: 760px;
    --gutter: clamp(1.25rem, 5vw, 2.5rem);
    --measure: 68ch;
    --measure-lead: 56ch;
    --header-h: 4.5rem;

    /* ---------- Motion ---------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 140ms;
    --dur-base: 240ms;
    --dur-slow: 520ms;
}

@media (max-width: 640px) {
    :root {
        --header-h: 4rem;
    }
}