/**
 * Design tokens — single source of truth.
 * Mirrors /Users/tcmundondo/tirivashe/.cowork/design-system/tokens.css.
 * Approved at Gate 2 v3 (2026-05-07).
 *
 * Never override these values inline. If a value isn't here, it shouldn't exist.
 */

:root {
    /* ───── TYPOGRAPHY ───── */

    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --type-h1-size: 4.25rem;
    --type-h1-weight: 800;
    --type-h1-leading: 1.04;
    --type-h1-tracking: -0.025em;

    --type-h2-size: 3rem;
    --type-h2-weight: 800;
    --type-h2-leading: 1.08;
    --type-h2-tracking: -0.022em;

    --type-h3-size: 2rem;
    --type-h3-weight: 700;
    --type-h3-leading: 1.18;
    --type-h3-tracking: -0.018em;

    --type-h4-size: 1.25rem;
    --type-h4-weight: 700;
    --type-h4-leading: 1.30;

    --type-body-size: 1.0625rem;
    --type-body-leading: 1.60;
    --type-prose-size: 1.1875rem;
    --type-prose-leading: 1.65;
    --type-body-sm-size: 0.9375rem;

    --type-ui-size: 0.9375rem;
    --type-ui-weight: 500;

    --type-eyebrow-size: 0.8125rem;
    --type-eyebrow-weight: 700;
    --type-eyebrow-tracking: 0.10em;

    --type-h1-size-mobile: 2.75rem;
    --type-h2-size-mobile: 2.125rem;
    --type-h3-size-mobile: 1.625rem;

    /* ───── COLOUR ───── */

    --ink: #111827;
    --ink-soft: #4B5563;
    --ink-faded: #6B7280;

    --paper: #FFFFFF;
    --paper-soft: #F5F6F7;
    --paper-elevated: #FFFFFF;

    --rule: #E5E7EB;
    --rule-strong: #D1D5DB;

    --accent: #F26522;
    --accent-hover: #D54E0E;
    --accent-soft: #FEEEE3;
    --accent-faint: #FFF7F1;

    --ink-deep: #0F172A;

    --success: #16A34A;

    /* ───── SPACING (8-pt grid) ───── */

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;
    --space-20: 10rem;

    /* ───── LAYOUT ───── */

    --content-width: 720px;
    --content-width-wide: 1240px;
    --gutter-mobile: 1.25rem;
    --gutter-desktop: 2rem;
    --gutter: var(--gutter-mobile);

    /* ───── SURFACES ───── */

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);
    --shadow-md: 0 4px 6px rgba(17, 24, 39, 0.04), 0 12px 20px rgba(17, 24, 39, 0.08);
    --shadow-photo: 0 24px 48px rgba(17, 24, 39, 0.12);

    /* ───── BRAND-MARK SIGNATURE ───── */

    --rule-accent-width: 56px;
    --rule-accent-height: 3px;

    /* ───── MOTION ───── */

    --motion-fast: 120ms;
    --motion-base: 160ms;
    --motion-slow: 220ms;
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* ───── Z-INDEX ───── */

    --z-sticky: 100;
    --z-overlay: 500;
    --z-modal: 1000;
}

@media (min-width: 768px) {
    :root { --gutter: var(--gutter-desktop); }
}

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