/* ============================================================
   Niswosakit — brand.css · the design-token spine
   THE single source of truth for color, type, the locked logo,
   and the shared scale. Linked FIRST on every page, root-absolute
   (/css/brand.css), then base.css, then the page's own CSS.

   Plain, UNLAYERED on purpose: a prior @layer rebuild silently
   broke the logo and Support colors (any unlayered rule beats all
   layered CSS), so the tokens live in one flat :root that a page
   overrides simply by loading its CSS after this one.

   Fonts are self-hosted from /fonts with root-absolute URLs, so the
   site makes no third-party font call and the paths never depend on
   a page's directory depth.
   ============================================================ */

/* ── the four faces, self-hosted, root-absolute ─────────────────── */
@font-face{ font-family:"Git Sans"; src:url("/fonts/git-sans.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Formula Condensed"; src:url("/fonts/formula-condensed-light.woff2")   format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Formula Condensed"; src:url("/fonts/formula-condensed-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Formula Condensed"; src:url("/fonts/formula-condensed-bold.woff2")    format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Formula Condensed"; src:url("/fonts/formula-condensed-black.woff2")   format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Geist Mono"; src:url("/fonts/geist-mono.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; }

:root{
  color-scheme:dark;

  /* ── Color ─────────────────────────────────────────────── */
  --ink:#0B0B0C;            /* near-black. the ground everything sits on. */
  --paper:#EBEBEB;          /* paper. neutral off-white, no hue. the foreground text on the dark ground. */
  --muted:#9A968C;          /* muted. labels, indices, secondary text. */
  --faint:#6E6B64;          /* faint. fine print, hairlines, captions. */
  --line:rgba(235,235,235,.13);   /* divider lines (paper at low alpha). */

  --green:#5FFF78;          /* RESERVED. Support + live-status indicators ONLY. Not a general text/number accent. */
  --pink:#FDAEF1;           /* the logo pink, straight from the city maps. (Map-only pinks #ff2d88/#d21f7a never appear on the site.) */
  --aqua:#40FFE9;           /* vibrant aqua. focus ring; otherwise unassigned. */
  --red:#FF5F37;            /* red-orange. the owner's; the wordmark on the Disagree page. */
  --accent:var(--pink);     /* the page's working accent. a page may override to green where it runs green. */

  /* ── The locked logo ── one color, one size, identical on every page. */
  --logo-color:var(--pink);
  --logo-size:clamp(2.4rem, 5vw, 3.4rem);   /* the masthead wordmark size, locked. change it HERE, everywhere follows. */

  /* ── Type — the four faces (see Files/Type-Rules.md) ───────────────────────
     Each stack has a full, metric-matched fallback chain that ALWAYS lands on a
     sans-serif or monospace, NEVER serif, so a failed/blocked webfont degrades
     gracefully instead of dropping the page to Times. */
  --font-display:"Git Sans","Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;                 /* wordmark + rare set-pieces. ALL CAPS via CSS. */
  --font-cond:"Formula Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",system-ui,sans-serif; /* hero, big numbers, lens + section titles. */
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;          /* labels, nav, sources, footer, $ amounts. caps + tracked. */
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* body, decks, supporting copy, UI. normal case. */

  /* ── Fluid type scale ── the one canonical scale, clamp() on a REM base. */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.75rem);
  --step-4:  clamp(2.07rem, 1.55rem + 2.60vw, 3.75rem);
  --step-5:  clamp(2.49rem, 1.65rem + 4.20vw, 5.25rem);
  --step-6:  clamp(3.00rem, 1.70rem + 6.50vw, 7.00rem);

  /* ── Space scale ── */
  --space-1: 0.375rem;  --space-2: 0.625rem;  --space-3: 1rem;
  --space-4: 1.5rem;    --space-5: 2.5rem;    --space-6: 4rem;    --space-7: 6rem;

  /* ── Shape + motion ── */
  --radius:    14px;
  --radius-lg: 26px;
  --measure:   64ch;   /* readable prose line length */
  --wrap:      74ch;   /* the shared page width — masthead, body, footer all align to this */
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --dur:       240ms;

  /* ── Page rhythm ── gutter (L/R) + block padding (top/bottom), one place. */
  --gutter:    clamp(var(--space-3), 5vw, var(--space-6));
  --pad-block: clamp(var(--space-4), 5vw, var(--space-7));

  /* ── Breakpoints ── documented source of truth (@media can't read a var()).
       phone ≤ 560px · tablet 561–768px · desktop ≥ 769px · wide ≥ 1080px */
  --bp-phone:  560px;
  --bp-tablet: 768px;
  --bp-wide:   1080px;

  /* ── Semantic surface aliases ── base.css reads ONLY these, so a page can
       retheme by redefining --bg / --fg without touching the floor. */
  --bg:      var(--ink);
  --fg:      var(--paper);
  --fg-soft: #C7C4BC;
  --focus:   var(--aqua, var(--green));
}

/* ── The locked wordmark ── THE logo, one treatment, one size, one color.
   The shared nav injects its own `.wordmark` reading these same tokens, so
   the masthead logo and any in-page wordmark stay identical everywhere. */
.wordmark{
  font-family:var(--font-display);
  text-transform:uppercase;
  color:var(--logo-color);
  text-decoration:none;
  letter-spacing:-.01em;
  font-size:var(--logo-size);
  line-height:1;
}