/* ============================================================
   NKTD Design Tokens
   Single source of truth for the marketing design system.
   Extracted 1:1 from the /Mockup design exports.
   ============================================================ */
:root {
    /* — Surfaces — */
    --c-sand: #F4F1E9;        /* page background */
    --c-sand-alt: #EFEBE1;    /* alternate band / inset */
    --c-surface: #FCFBF7;     /* cards, panels, menus */
    --c-ink: #1A1813;         /* primary text & dark sections */

    /* — Text on light — */
    --c-ink-2: #3B382F;       /* nav links */
    --c-ink-3: #4A463C;       /* lead paragraphs */
    --c-muted: #5A554A;       /* body copy */
    --c-muted-2: #8A8478;     /* captions, subtitles */
    --c-faint: #B0A998;       /* timestamps, hints */

    /* — Text on dark — */
    --c-on-dark: #F4F1E9;
    --c-on-dark-70: rgba(244, 241, 233, 0.72);
    --c-on-dark-62: rgba(244, 241, 233, 0.62);
    --c-on-dark-58: rgba(244, 241, 233, 0.58); /* dark-surface body text */
    --c-on-dark-55: rgba(244, 241, 233, 0.55);
    --c-on-dark-40: rgba(244, 241, 233, 0.40);

    /* — Accent & status — */
    --accent: #E14E2B;        /* brand accent (single source; swap here to re-theme) */
    --accent-ink: #FFFFFF;    /* text on accent */
    --accent-tint: rgba(225, 78, 43, 0.10); /* accent @10% — tinted backgrounds/pills */
    --c-success: #1F7A4D;     /* "Online" / live status on light */
    --c-success-tint: rgba(31, 122, 77, 0.10);
    --c-success-dark: #3FB27F;/* status dots on dark surfaces */

    /* — Hairlines (on light) — */
    --line-soft: rgba(26, 24, 19, 0.08);
    --line: rgba(26, 24, 19, 0.10);
    --line-2: rgba(26, 24, 19, 0.12);
    --line-14: rgba(26, 24, 19, 0.14); /* slightly stronger hairline (FAQ, sub-nav divider) */
    --line-strong: rgba(26, 24, 19, 0.22);
    /* — Hairlines (on dark) — */
    --line-dark: rgba(244, 241, 233, 0.10);
    --line-dark-2: rgba(244, 241, 233, 0.12);

    /* — Typography — */
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif; /* headings, wordmark, stats */
    --font-body: 'Hanken Grotesk', system-ui, sans-serif;         /* body copy */
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;       /* eyebrows, labels, values */

    /* — Radii — */
    --r-btn: 2px;
    --r-card: 6px;
    --r-menu: 8px;
    --r-pill: 20px;

    /* — Elevation — */
    --shadow-menu: 0 20px 48px -24px rgba(26, 24, 19, 0.45);
    --shadow-card: 0 24px 60px -28px rgba(26, 24, 19, 0.35);
    --shadow-panel: 0 28px 70px -30px rgba(26, 24, 19, 0.40);

    /* — Layout — */
    --container: 1280px;
    --gutter: 40px;           /* desktop horizontal padding */
    --gutter-sm: 20px;        /* mobile horizontal padding */
    --section-y: 100px;       /* desktop vertical rhythm (inner pages; homepage overrides to 108) */
    --section-y-sm: 64px;     /* mobile vertical rhythm */
    --nav-h: 76px;
}

/* Mobile gutters/rhythm collapse below the nav breakpoint. */
@media (max-width: 880px) {
    :root {
        --gutter: var(--gutter-sm);
        --section-y: var(--section-y-sm);
        --nav-h: 60px;
    }
}