/* ============================================================
   NativeFoundation · RelayOS — Colors & Type
   Cool stone canvas · navy ink · graphite primary · vivid orange
   Sans for everything; Fraunces italic only as the rare emphasis flourish
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500..700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
    /* ── Surfaces (warm sandstone; subtle warmth, still industrial) ── */
    --nf-canvas: #eeeae2; /* page background — warm sandstone */
    --nf-surface: #e0dcd3; /* inset / secondary panels */
    --nf-paper: #ffffff; /* cards */
    --nf-neutral: #d1cdc3; /* dividers, captions */
    --nf-line: #d8d4ca; /* hairline on canvas */
    --nf-line2: #e6e2d8; /* fainter hairline */

    /* ── Ink (cool navy, never warm grey) ───────────────────── */
    --nf-ink: #1a1d22; /* primary type */
    --nf-ink2: #3a4148; /* body / secondary */
    --nf-ink3: #7c8087; /* captions, mute */

    /* ── Primary (deep graphite — neutral, lets orange carry the warmth) ── */
    --nf-primary: #252a2f;
    --nf-primary-soft: #e9e4da;
    --nf-primary-ink: #0f1216;

    /* ── Highlight (NF brand orange — matches www.nativefoundation.ai) ── */
    --nf-highlight: #ff6b35;
    --nf-highlight-soft: #ffe4d6;
    --nf-highlight-ink: #7a2700;

    /* Semantic foreground (alias) */
    --fg1: var(--nf-ink);
    --fg2: var(--nf-ink2);
    --fg3: var(--nf-ink3);
    --bg1: var(--nf-canvas);
    --bg2: var(--nf-surface);
    --bg3: var(--nf-paper);

    /* ── Type families ──────────────────────────────────────────
     Display: Geist — sans, used for headings and body copy. The upright
              voice of the system is sans throughout.
     Serif:   Fraunces — italic only, reserved exclusively for the rare
              emphasis flourish (.nf-display-italic). Never upright,
              never body, never chrome.
     Mono:    JetBrains Mono — eyebrows, captions, technical readout. */
    --nf-display: "Geist", -apple-system, "Helvetica Neue", sans-serif;
    --nf-sans: "Geist", -apple-system, "Helvetica Neue", sans-serif;
    --nf-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --nf-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

    /* ── Radii (slightly tighter — less pillowy than v1) ────── */
    --nf-rad-sm: 4px;
    --nf-rad-md: 8px;
    --nf-rad-lg: 12px;
    --nf-rad-xl: 16px;
    --nf-rad-pill: 999px;

    /* ── Spacing scale (8px grid) ───────────────────────────── */
    --nf-sp-1: 4px;
    --nf-sp-2: 8px;
    --nf-sp-3: 12px;
    --nf-sp-4: 16px;
    --nf-sp-5: 20px;
    --nf-sp-6: 24px;
    --nf-sp-7: 32px;
    --nf-sp-8: 40px;
    --nf-sp-9: 48px;
    --nf-sp-10: 64px;

    /* ── Shadows (cooler, flatter — less editorial-marketing) ── */
    --nf-shadow-xs: 0 1px 2px rgba(26, 29, 34, 0.06), 0 2px 4px rgba(26, 29, 34, 0.04);
    --nf-shadow-sm: 0 1px 3px rgba(26, 29, 34, 0.08), 0 2px 6px rgba(26, 29, 34, 0.05);
    --nf-shadow-card: 0 2px 4px rgba(26, 29, 34, 0.08), 0 6px 16px rgba(26, 29, 34, 0.08);
    --nf-shadow-pop: 0 4px 8px rgba(26, 29, 34, 0.1), 0 12px 28px rgba(26, 29, 34, 0.12);
    --nf-shadow-hero: 0 4px 10px rgba(26, 29, 34, 0.1), 0 18px 40px rgba(26, 29, 34, 0.12);
    --nf-shadow-inset:
        inset 0 1px 2px rgba(26, 29, 34, 0.1), inset 0 0 0 1px rgba(26, 29, 34, 0.06);

    --nf-hairline: 1px solid rgba(26, 29, 34, 0.08);
}

/* ── Semantic type styles ─────────────────────────────────── */

.nf-eyebrow {
    font-family: var(--nf-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--nf-ink3);
}
.nf-eyebrow--primary {
    color: var(--nf-primary);
}
.nf-eyebrow--highlight {
    color: var(--nf-highlight);
}

/* Headings — Geist sans, tight tracking at scale. */
.nf-h1,
h1.nf {
    font-family: var(--nf-display);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -1.6px;
    color: var(--nf-ink);
}
.nf-h2,
h2.nf {
    font-family: var(--nf-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.7px;
    color: var(--nf-ink);
}
.nf-h3,
h3.nf {
    font-family: var(--nf-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--nf-ink);
}

/* Emphasis flourish — the ONLY place serif appears.
   Italic Fraunces in vivid orange. Use sparingly, one or two words
   inside a heading or hero line — never for body or chrome. */
.nf-display-italic {
    font-family: var(--nf-serif);
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--nf-highlight);
}

.nf-body,
p.nf {
    font-family: var(--nf-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--nf-ink2);
}
.nf-body-sm {
    font-family: var(--nf-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--nf-ink2);
}
.nf-caption {
    font-family: var(--nf-mono);
    font-size: 11px;
    letter-spacing: 0.4px;
    color: var(--nf-ink3);
}
.nf-button-text {
    font-family: var(--nf-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ── Brand mark ───────────────────────────────────────────────
   The black logo-mark.png is masked to a theme color so the icon
   adopts the active palette automatically. Default tone is the brand
   orange highlight (matches www.nativefoundation.ai); ink and paper
   modifiers cover dark-on-light and light-on-dark contexts. */
.nf-brand-mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: var(--nf-highlight);
    -webkit-mask: url("/assets/nf-mark.png") no-repeat center / contain;
    mask: url("/assets/nf-mark.png") no-repeat center / contain;
    vertical-align: middle;
}
.nf-brand-mark--ink {
    background-color: var(--nf-ink);
}
.nf-brand-mark--paper {
    background-color: var(--nf-paper);
}

/* ── Terminal voice ───────────────────────────────────────────
   The geek-cool register lifted from www.nativefoundation.ai. Lives
   parallel to the editorial Fraunces-italic moments — the system
   carries both, and the juxtapose is the point. Use these motifs
   for craft moments (splash banners, build labels, console-style
   metadata) where the tone wants to read "we use the command line."
*/

/* The full ASCII wordmark. Render as <pre class="nf-ascii-mark">…</pre>
   with the multiline string. Sits at 7px on the homepage; bump up for
   marketing-scale moments. */
.nf-ascii-mark {
    font-family: var(--nf-mono);
    font-size: 7px;
    line-height: 1.2;
    color: var(--nf-highlight);
    margin: 0;
    white-space: pre;
    font-weight: 400;
}
.nf-ascii-mark--ink {
    color: var(--nf-ink);
}
.nf-ascii-mark--lg {
    font-size: 11px;
}
.nf-ascii-mark--xl {
    font-size: 14px;
}

/* Boot variant — the ASCII appears, holds for a beat, then fades and
   collapses out of the layout. Reads as a CLI startup line: present,
   then gone, leaving the editorial register to take over. Use on a
   splash hero or any "first paint" moment; pair with the boot-info
   strip for the full bootup gestalt. */
@keyframes nf-ascii-boot {
    0% {
        opacity: 0;
        transform: translateY(-2px);
    }
    8% {
        opacity: 1;
        transform: translateY(0);
    }
    55% {
        opacity: 1;
        max-height: 60px;
        margin-bottom: 20px;
    }
    85% {
        opacity: 0;
        max-height: 60px;
        margin-bottom: 20px;
    }
    100% {
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
    }
}
.nf-ascii-mark--boot {
    overflow: hidden;
    animation: nf-ascii-boot 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
    .nf-ascii-mark--boot {
        animation: none;
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
    }
}

/* Section heading styled as a terminal command:
     <h2 class="nf-prompt-line">
       <span class="nf-prompt">&gt;</span>
       <span class="nf-cmd">whoami</span>
     </h2>
*/
.nf-prompt-line {
    font-family: var(--nf-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--nf-ink);
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.nf-prompt-line .nf-prompt {
    color: var(--nf-highlight);
    font-weight: 600;
}
.nf-prompt-line .nf-cmd {
    color: var(--nf-ink);
}

/* Description-line motif: a mono "--" prefix followed by descriptive copy.
   Used as a sub-line under labels, in file-listing patterns, or anywhere
   a terse CLI-style annotation is wanted.
     <span class="nf-file-desc">-- ingestion, enrichment, orchestration</span>
*/
.nf-file-desc {
    font-family: var(--nf-mono);
    font-size: 11px;
    letter-spacing: 0.2px;
    color: var(--nf-ink3);
}

/* Boot-info / build-banner strip. Used for splash metadata bands.
   Pipe-separated terms; subtle dim/active styling per span.
     <div class="nf-boot-info">
       <span class="dim">system</span>
       <span class="ok">ready</span> |
       <span class="dim">london | los angeles</span> |
       <span class="dim">status</span>
       <span class="ok">operational</span>
     </div>
*/
.nf-boot-info {
    font-family: var(--nf-mono);
    font-size: 11px;
    letter-spacing: 0.4px;
    color: var(--nf-ink3);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.nf-boot-info .dim {
    color: var(--nf-ink3);
}
.nf-boot-info .ok {
    color: var(--nf-highlight);
    font-weight: 500;
}

/* CLI status pill — square brackets, mono, status-tinted.
     <span class="nf-cli-status nf-cli-status--ready">READY</span>
*/
.nf-cli-status {
    font-family: var(--nf-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--nf-ink2);
    padding: 0 4px;
    white-space: nowrap;
}
.nf-cli-status::before {
    content: "[ ";
    color: var(--nf-ink3);
}
.nf-cli-status::after {
    content: " ]";
    color: var(--nf-ink3);
}
.nf-cli-status--ready {
    color: var(--nf-highlight);
}
.nf-cli-status--done {
    color: var(--nf-ink);
}
.nf-cli-status--warn {
    color: var(--nf-highlight);
}

/* Numbered CLI menu list. Renders link rows as
     1. AI-Native Rebuild  -- our core thesis
   in monospace. Use as <ol class="nf-menu-list">… */
.nf-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--nf-mono);
    font-size: 13px;
    line-height: 1.8;
}
.nf-menu-list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.nf-menu-list .num {
    color: var(--nf-highlight);
    font-weight: 600;
    min-width: 1.5em;
}
.nf-menu-list .label {
    color: var(--nf-ink);
    font-weight: 500;
}
.nf-menu-list .desc {
    color: var(--nf-ink3);
}

/* ASCII rule — drawn-with-characters horizontal divider.
   Use as a section break with more personality than a hairline.
     <div class="nf-rule-ascii" aria-hidden>── ◆ ──</div>
*/
.nf-rule-ascii {
    font-family: var(--nf-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--nf-ink3);
    text-align: center;
    user-select: none;
}

/* Pair — the human ◆ machine dialogue motif.
   The signature subconscious signal: every NF surface should put one
   human moment in dialogue with one machine moment, ideally in the
   same line. Editorial Fraunces italic on the left (the human voice),
   technical JetBrains Mono on the right (the machine voice), separated
   by a small orange diamond — the same glyph the .nf-rule-ascii uses,
   so the two motifs visually rhyme.
     <div class="nf-pair">
       <em class="nf-pair__lyrical">Foresight for inevitable futures.</em>
       <span class="nf-pair__sep" aria-hidden>◆</span>
       <code class="nf-pair__technical">est. 2025 · status operational</code>
     </div>
*/
.nf-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.nf-pair__lyrical {
    font-family: var(--nf-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.1px;
    color: var(--nf-highlight);
}
/* Separator is a gently blinking CLI block cursor — the beat between
   the human phrase and the machine phrase. The cursor itself IS the
   dialogue: it alternates between highlight orange (human voice) and
   graphite ink (machine voice) on a slow 2s breathing cycle. Renders
   via a sized + animated <span>; any text content inside it is hidden
   so existing ◆ markup falls back gracefully. */
.nf-pair__sep {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin: 0 6px;
    background: var(--nf-highlight);
    align-self: center;
    font-size: 0;
    user-select: none;
    animation: nf-cursor-blink 3.4s ease-in-out infinite;
}
@keyframes nf-cursor-blink {
    /* Orange breath — rise, hold, fade. Colour stays orange the whole time. */
    0% {
        background: var(--nf-highlight);
        opacity: 0.12;
    }
    15% {
        background: var(--nf-highlight);
        opacity: 1;
    }
    35% {
        background: var(--nf-highlight);
        opacity: 1;
    }
    49% {
        background: var(--nf-highlight);
        opacity: 0.12;
    }
    /* Instant colour swap at the bottom of the breath, while the cursor
     is invisible — no muddy mid-tone, no visible crossfade. */
    50% {
        background: var(--nf-ink);
        opacity: 0.12;
    }
    /* Graphite breath — rise, hold, fade. Symmetric to the orange beat. */
    65% {
        background: var(--nf-ink);
        opacity: 1;
    }
    85% {
        background: var(--nf-ink);
        opacity: 1;
    }
    99% {
        background: var(--nf-ink);
        opacity: 0.12;
    }
    /* Swap back to orange while still invisible — closes the loop. */
    100% {
        background: var(--nf-highlight);
        opacity: 0.12;
    }
}
@media (prefers-reduced-motion: reduce) {
    .nf-pair__sep {
        animation: none;
        background: var(--nf-highlight);
        opacity: 0.85;
    }
}
.nf-pair__technical {
    font-family: var(--nf-mono);
    font-size: 12px;
    letter-spacing: 0.3px;
    color: var(--nf-ink2);
}
/* Stacked variant — for tighter contexts where the two pieces want to
   read as a vertical pair rather than a horizontal one. */
.nf-pair--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.nf-pair--stack .nf-pair__sep {
    display: none;
}

/* ── Surface helpers ──────────────────────────────────────── */

.nf-card {
    background: var(--nf-paper);
    border-radius: var(--nf-rad-lg);
    box-shadow: var(--nf-shadow-card);
    outline: var(--nf-hairline);
    outline-offset: -1px;
}
.nf-inset {
    background: var(--nf-surface);
    border-radius: var(--nf-rad-md);
    box-shadow: var(--nf-shadow-inset);
}