/* ==========================================================================
   BotCodes — global design tokens (Scrap Zine)
   Per BUILD_HANDOFF_scrap_zine_2026-07-28.md §0. Phase 1.
   ==========================================================================
   TWO-WORLD RULE: paper world (scan, reveal, binder, hub chrome) vs dark
   world (title, home dock, garage, battle stage). The dark->light transition
   on equip is a feature, not an inconsistency. The garage render stage keeps
   its existing dark backdrop untouched.
   ========================================================================== */

:root {
  /* --- paper world --- */
  --paper: #f4f0e6;
  --ink:   #101010;
  --red:   #ff4d29;
  --foil:  #ffd23f;
  --kraft: #c9b58c;
  --grey:  #8a8578;

  /* --- dark rooms --- */
  --void-bg: #0d1117;
  --panel:   #161b22;
  --line:    #2a3340;

  /* ⚠ NAME COLLISION, deliberate and currently harmless.
     index/scan/collection each declare their own `:root` in an inline
     <style> AFTER this file loads, redefining `--ink` (#e8eaee, a light
     text colour) and `--panel` (#1d2026). Those win by source order, which
     is why Phase 1 changes no colours anywhere — existing screens keep
     their exact look.
     In the Scrap Zine tokens `--ink` means near-black PAPER ink (#101010) —
     the opposite meaning. Phase 3 must delete the per-page :root blocks
     rather than layer on top of them, or a paper screen will inherit a
     light "ink" and render invisible text on white stock. */

  /* --- attunements (LOCKED — ATTUNEMENTS.md) ---
     Authoritative over any older colour values. Hexes are PROVISIONAL
     pending the on-device binder check: the warm run sonic -> solar -> foil
     -> volt must stay distinguishable as thumbnails in a dark grid.
     Cyan is retired permanently (cyan/cryo adjacency failed on hardware). */
  --att-toxic:  #3ee34f;
  --att-solar:  #ff8c1a;
  --att-volt:   #ffe93c;
  --att-cryo:   #5fa8ff;
  --att-sonic:  #ff3b30;
  --att-void:   #8a5cff;
  --att-plasma: #ff3fae;
  --att-unattuned: #9aa0a8;   /* unattuned renders NO glow and NO dot */

  /* --- type stacks ---
     Self-hosted only. There is deliberately no Google Fonts link anywhere in
     this project: a CDN font request is a network dependency, and a network
     dependency on first paint breaks the offline guarantee that the whole
     PWA design rests on. Fonts are ASSETS, not dependencies (handoff §7). */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Share Tech Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ==========================================================================
   Self-hosted fonts — latin subset, woff2 only.
   ==========================================================================
   `font-display: swap` so text paints immediately in the fallback and
   re-renders when the face loads. Combined with the service worker precache
   this means: first load may briefly show system type, every load after that
   (online or off) shows the real face with no flash.

   Files live in /fonts and are listed in precache.json.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/share-tech-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Phase 1 applies tokens WITHOUT restyling. Screens keep their current look;
   only the type stack is adopted, so a font problem is visible immediately
   and in isolation rather than tangled up with a layout change. Paper-world
   restyles are Phase 3.
   -------------------------------------------------------------------------- */
body { font-family: var(--font-body); }

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: .02em; }

code, kbd, samp, .mono, .serial { font-family: var(--font-mono); }