/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — every colour, size, family and duration on this site.
   Rule 1: if you are about to type a hex code or a px size into site.css,
   add a token here instead.

   Two grounds. DAY is a warm worked ground; NIGHT is not its inverse —
   the browns LIFT into a lit tan rather than falling to grey, and the amber
   begins to glow. The relationship is a day passing, not a colour flip.

   The viewer has three states: an explicit choice stamps data-theme on the
   root; the default stamps nothing and only prefers-color-scheme separates
   them. All three are declared. js/site.js stamps data-theme from the
   neighborhood's own sun, and a manual choice beats it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── DAY ───────────────────────────────────────────────────────────────── */
  --ground:      #EFE8D8;
  --ground-2:    #E5DBC6;
  --ground-3:    #DACEB4;

  --text:        #1C1815;
  --text-soft:   #6B6152;
  --text-faint:  #9C9280;

  --sign:        #4C3B27;   /* routed-sign brown — STRUCTURAL, never decorative */
  --sign-soft:   #7A6448;

  --live:        #B96A12;   /* ⚠ RESERVED. Only where something is actually live. */

  /* ⛔ THE SUN, MOON AND MARIA TOKENS ARE GONE — the band stopped drawing flat
     bodies when it started containing a perspective render, and the scene draws
     its own. They were taken from the Sky Builder verbatim; if a CSS sky ever
     returns, take them from the product again rather than from memory:
     cartograph/SkyGradientGrid.jsx. Archived: git show ef50392^:css/tokens.css */

  /* ── CARY ──────────────────────────────────────────────────────────────
     Cary is a separate product living inside the Ward, and the page should say
     so before the copy does. ⭐ THE HUE IS NOT INVENTED: verdigris is the
     product's OWN authored courier colour — SocietyMasthead's Couriers stat,
     rgba(61,175,138). Taken from the product rather than picked here, for the
     same reason the sky strip is.
     ⚠️ And it is deliberately NOT `--live`: amber is reserved for what is
     actually running, and couriers are not open yet. The section's own note
     says so. Using amber here would have been the rule's first breach. */
  --cary-ground: #E4DCC9;
  --cary-rule:   #2F7D63;

  --rule:        rgba(28, 24, 21, 0.22);
  --rule-soft:   rgba(28, 24, 21, 0.10);

  --band-bg:     #1C1815;
  --band-text:   #EFE8D8;


  /* ── type ──────────────────────────────────────────────────────────────── */
  --f-sys: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-txt: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* ── scale ─────────────────────────────────────────────────────────────── */
  --s0: 0.25rem;
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.25rem;
  --s6: 3.5rem;
  --s7: 5.5rem;

  --measure: 62ch;
  --page:    1180px;

  --t-fast: 140ms;
  --t-slow: 420ms;


  /* ── THE BADGE MASTER ──────────────────────────────────────────────────
     ⭐ ONE field for every badge, and that is the whole design. The grounds
     used to be derived from each emoji's own colours, which guarantees the
     worst case: a blue bicycle got a blue ground and 16% of its ink cleared
     3:1. Swept across a neutral ground from black to white, NO single flat
     value serves all five — mid-tones take the worst glyph to ~0% legible
     ink, white kills the key and the cup, black kills the bicycle.
     ⭐ So it does what a merit badge does: a constant field and a deep rim.
     The field is the page's own cream — Jacob, on seeing the gold keyholder
     badge: "if the gold of the background was the cream of the paper I think
     the emojis would show up." It is. They do.
     ⛔ AN OUTLINE ON THE GLYPH WAS TRIED AND CUT — it read as a sticker.
     Only a whisper of drop-shadow remains, for relief rather than legibility.
     ⚠️ THE COST, RECORDED: a glyph with NO dark contour of its own has nothing
     to read against a pale field. Measured on this field, 🥚 ☁️ 🦢 clear 3:1
     on 0–1% of their ink. The set in use is fine; a pale emoji is not, and
     that is now a thing to CHECK when swapping one rather than something the
     treatment guarantees. Nothing here is tuned to a particular glyph; only
     SIZE and CENTRING are, and those are generated below. */
  --vig-field: radial-gradient(circle at 42% 34%, hsl(44, 52%, 95%) 0%, hsl(38, 34%, 84%) 100%);
  --vig-rim:
    inset 0 0 0 3px hsl(28, 42%, 34%),
    inset 0 0 0 5px hsla(38, 55%, 72%, 0.45),
    inset 0 -6px 12px hsla(28, 40%, 38%, 0.28),
    inset 0 3px 6px hsla(45, 60%, 100%, 0.55);
  /* ⭐ ONE ROLE GETS A DIFFERENT RIM, and it is semantic, not decorative: the
     courier is the single deliberate exception in the trust ladder, and this is
     the verdigris of the Cary room that follows — so the badge POINTS FORWARD to
     the section that explains it. ⛔ It is the ONLY override. If a second role
     ever wants one, the reason has to be as good as this or the set stops
     meaning anything. Same field, same drop, same geometry; the rim alone. */
  --vig-rim-accent:
    inset 0 0 0 3px hsl(160, 45%, 30%),
    inset 0 0 0 5px hsla(158, 42%, 62%, 0.45),
    inset 0 -6px 12px hsla(165, 35%, 30%, 0.28),
    inset 0 3px 6px hsla(45, 60%, 100%, 0.55);
  --vig-drop: rgba(50, 40, 26, 0.20);
  /* VIGNETTES:BEGIN — generated by tools/build-vignettes.mjs. Do not edit by hand. */
  /* 5 participant badges — generated by tools/build-vignettes.mjs.
     Do not edit by hand. ⛔ COLOUR IS NOT HERE: the field, rim and halo are one
     authored master above, deliberately, so any emoji can be dropped in.
     Scaled toward an inked height of 0.97em, and nudged so the GRAPHIC
     lands centred — a flex box only ever centres the line box, and this font
     puts its baseline at 0.84em, not 0.5em. See data/vignette-glyphs.json.
     Measured 2026-08-23 on Chrome/151 · MacIntel · Apple Color Emoji · rastered from the baseline at 200px. */
  --vig-townie-emoji: "☕";
  --vig-townie-scale: 1.121;
  --vig-townie-nudge: 0.0725em;
  --vig-resident-emoji: "🏡";
  --vig-resident-scale: 1.005;
  --vig-resident-nudge: 0.0175em;
  --vig-guardian-emoji: "🛡️";
  --vig-guardian-scale: 0.970;
  --vig-guardian-nudge: 0.0350em;
  --vig-keyholder-emoji: "🔑";
  --vig-keyholder-scale: 0.970;
  --vig-keyholder-nudge: 0.0350em;
  --vig-courier-emoji: "🚲";
  --vig-courier-scale: 1.459;
  --vig-courier-nudge: -0.1025em;
  /* VIGNETTES:END */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #16130F;
    --ground-2:   #201B15;
    --ground-3:   #2B241B;
    --text:       #E9E1CE;
    --text-soft:  #958A76;
    --text-faint: #6B6252;
    --sign:       #C3A47C;
    --sign-soft:  #9A8058;
    --live:       #F2B44E;
    --cary-ground: #1C201E;
    --cary-rule:   #56B892;
    --cary-ground: #1C201E;
  --cary-rule:   #56B892;
  --rule:       rgba(233, 225, 206, 0.24);
    --rule-soft:  rgba(233, 225, 206, 0.11);
    /* The browns lift, so the badge lifts with them — a shade deeper than day
    so five cream discs do not glare on a dark page. */
    --vig-field: radial-gradient(circle at 42% 34%, hsl(42, 34%, 88%) 0%, hsl(36, 24%, 74%) 100%);
    --vig-rim:
    inset 0 0 0 3px hsl(30, 38%, 26%),
    inset 0 0 0 5px hsla(40, 50%, 66%, 0.5),
    inset 0 -6px 12px hsla(28, 36%, 30%, 0.3),
    inset 0 3px 6px hsla(45, 55%, 96%, 0.45);
    --vig-rim-accent:
      inset 0 0 0 3px hsl(157, 40%, 40%),
      inset 0 0 0 5px hsla(155, 45%, 70%, 0.5),
      inset 0 -6px 12px hsla(165, 32%, 26%, 0.3),
      inset 0 3px 6px hsla(45, 55%, 96%, 0.45);
    --vig-drop: rgba(38, 30, 20, 0.24);
    /* The browns lift, so the badge lifts with them — a shade deeper than day
  so five cream discs do not glare on a dark page. */
  --vig-field: radial-gradient(circle at 42% 34%, hsl(42, 34%, 88%) 0%, hsl(36, 24%, 74%) 100%);
  --vig-rim:
  inset 0 0 0 3px hsl(30, 38%, 26%),
  inset 0 0 0 5px hsla(40, 50%, 66%, 0.5),
  inset 0 -6px 12px hsla(28, 36%, 30%, 0.3),
  inset 0 3px 6px hsla(45, 55%, 96%, 0.45);
  --vig-rim-accent:
    inset 0 0 0 3px hsl(157, 40%, 40%),
    inset 0 0 0 5px hsla(155, 45%, 70%, 0.5),
    inset 0 -6px 12px hsla(165, 32%, 26%, 0.3),
    inset 0 3px 6px hsla(45, 55%, 96%, 0.45);
  --vig-drop: rgba(38, 30, 20, 0.24);
  --band-bg:    #E9E1CE;
    --band-text:  #16130F;
  }
}

:root[data-theme="dark"] {
  --ground:     #16130F;
  --ground-2:   #201B15;
  --ground-3:   #2B241B;
  --text:       #E9E1CE;
  --text-soft:  #958A76;
  --text-faint: #6B6252;
  --sign:       #C3A47C;
  --sign-soft:  #9A8058;
  --live:       #F2B44E;
  --rule:       rgba(233, 225, 206, 0.24);
  --rule-soft:  rgba(233, 225, 206, 0.11);
  --band-bg:    #E9E1CE;
  --band-text:  #16130F;
}