/* =====================================================================
   § NorthType — design tokens (web)
   v0.2 · 2026-07 · dark-first, cooler surfaces, mono-house-mark
   Mirror of styles/DESIGN-SYSTEM.md. Native apps mirror these SAME names
   in an Asset Catalog / SwiftUI color set. One vocabulary across web + native.

   PALETTE IDENTITY — "warm-industrial / air-cooled heritage":
   steel house (the § / studio, a machined metallic), earthy warm liveries
   (rust · ochre-gold · olive-sage). Material honesty over decoration. This is
   the north star for every future color decision — no cool blues; color is a
   rare, warm signal on near-black instrument surfaces. (The vintage-Porsche
   heritage resemblance is a private source of conviction, NOT a public claim.)
   ===================================================================== */

/* ---------- Type families ----------
   Display/wordmark/headings/buttons → Space Grotesk (the personality).
   Body/dense UI → SF Pro native, Inter web (one token, resolves per platform).
   Technical/data/code/§ citations → JetBrains Mono.
   Optional display accent (parked) → Darker Grotesque (hero-only). */
:root{
  --nt-font-display: "Space Grotesk", system-ui, sans-serif;
  --nt-font-body: -apple-system, "Inter", system-ui, sans-serif; /* SF Pro on Apple, Inter elsewhere */
  --nt-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --nt-font-accent: "Darker Grotesque", var(--nt-font-display); /* parked; display-only */
}

/* ---------- DARK (primary brand surface — instrument panel) ---------- */
:root{
  color-scheme: dark;

  /* Surfaces — cool near-blacks (cooler than appliedbits warm paper) */
  --nt-bg:          #0A0B0D;  /* page / deepest */
  --nt-surface:     #141619;  /* raised: cards, panels */
  --nt-surface-2:   #1B1E23;  /* nested: rows, wells */
  --nt-surface-3:   #23262D;  /* highest raise / hover */

  /* Ink — cool off-whites */
  --nt-ink:         #ECEEF2;  /* primary text, house § on dark */
  --nt-ink-2:       #C4C8D0;  /* body text */
  --nt-muted:       #8A8F99;  /* secondary */
  --nt-faint:       #565C66;  /* tertiary, captions, mono labels */
  --nt-hairline:    #262A31;  /* borders, dividers, 1px rules */
  --nt-hairline-2:  #33373F;  /* stronger border / ghost-button edge */

  /* House mark: ALWAYS monochrome. § = ink on dark. Never a livery color.
     The § IS the studio (NorthType) — the house mark, not an app. On solid
     tiles it renders as STEEL — a neutral metallic (subtle brushed-metal
     gradient + near-black glyph) — which ties the warm app liveries together.
     ("Silcrow" retired as a name; the § is simply the house mark. The
     --nt-silcrow token name is kept as a stable identifier = the steel/house
     color.) */
  --nt-house-mark:  var(--nt-ink);
  --nt-silcrow:     #A9B0BA;  /* steel  — house/studio (§) metallic; NOT a warm livery */

  /* App livery — warm-anchored set. Each PAID app owns exactly ONE.
     Only appears inside its own app + that app's marketing surface.
     (Lineup locked 2026-07: Interpunct=firewall, Colophon=editor, Diesis=comms.) */
  --nt-interpunct:  #C0552E;  /* rust   — firewall (the separator / stop) */
  --nt-colophon:    #7EA663;  /* sage   — editor / dev workbench */
  --nt-diesis:      #C9A24B;  /* gold   — comms integrity (capstone) */

  /* Livery tints (subtle fills for tags/wells, on dark) */
  --nt-silcrow-dim: rgba(169,176,186,.14);
  --nt-interpunct-dim:rgba(192,85,46,.14);
  --nt-colophon-dim:rgba(126,166,99,.14);
  --nt-diesis-dim:  rgba(201,162,75,.14);

  /* Functional (not brand) — states */
  --nt-allow:       #4FA88A;  /* success/allowed (desaturated green-teal, functional only) */
  --nt-warn:        #D9A441;  /* caution */
  --nt-danger:      var(--nt-interpunct); /* reuse firewall rust for block/danger */
  --nt-focus:       var(--nt-ink);    /* focus ring = ink (mono-house); apps may override to livery */
}

/* ---------- LIGHT (web, docs, App Store, light-mode users) ---------- */
@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;

    --nt-bg:         #F7F7F5;  /* cool-warm off-white, cleaner than appliedbits cream */
    --nt-surface:    #FFFFFF;
    --nt-surface-2:  #F1F2F0;
    --nt-surface-3:  #E9EAE8;

    --nt-ink:        #141518;  /* primary, house § on light */
    --nt-ink-2:      #34363B;
    --nt-muted:      #6B6F76;
    --nt-faint:      #9198A1;
    --nt-hairline:   #E3E5E9;
    --nt-hairline-2: #D9DCE1;

    --nt-house-mark: var(--nt-ink);
    --nt-silcrow:    #7C838D;  /* steel (house/§), deepened for light */

    /* Livery — slightly deepened for contrast on light */
    --nt-interpunct: #A64826;  /* rust */
    --nt-colophon:   #5E8A46;  /* sage */
    --nt-diesis:     #A9832F;  /* gold */

    --nt-silcrow-dim:  rgba(124,131,141,.10);
    --nt-interpunct-dim:rgba(166,72,38,.10);
    --nt-colophon-dim: rgba(94,138,70,.10);
    --nt-diesis-dim:   rgba(169,131,47,.10);

    --nt-allow:      #3B8A6E;
    --nt-warn:       #B7842B;
    --nt-danger:     var(--nt-interpunct);
    --nt-focus:      var(--nt-ink);
  }
}

/* ---------- Type scale (1.25 ratio, px) ---------- */
:root{
  --nt-fs-11: 11px; --nt-fs-12: 12px; --nt-fs-14: 14px; /* mono labels · caption · body-small */
  --nt-fs-16: 16px;  /* base body */
  --nt-fs-20: 20px; --nt-fs-25: 25px; --nt-fs-31: 31px; --nt-fs-39: 39px; --nt-fs-49: 49px;
  /* display sizes want slightly tightened tracking; body never */
  --nt-tracking-display: -0.02em;
  --nt-tracking-body: 0;
}

/* ---------- Spacing (px) ---------- */
:root{
  --nt-space-1:4px;  --nt-space-2:8px;  --nt-space-3:12px; --nt-space-4:16px;
  --nt-space-5:24px; --nt-space-6:32px; --nt-space-7:48px; --nt-space-8:64px; --nt-space-9:96px;
}

/* ---------- Radius & elevation ---------- */
:root{
  --nt-radius:8px;      /* chips, buttons, rows */
  --nt-radius-lg:14px;  /* cards, panels */
  --nt-radius-pill:20px;
  /* At most one soft shadow, for genuine overlays (menus/popovers). Flat by default. */
  --nt-shadow-overlay: 0 8px 28px rgba(0,0,0,.45);
}