/* Sekka — Design Tokens
 * Single source of truth for the brand. Menus, decks, cards, and the site all
 * import these variables. Change a value here and everything updates.
 *
 * Grounded in Doi Toshitsura's 1832 "Sekka Zusetsu" (雪華図説). Colors are
 * SAMPLED from the NDL archival scans (PID 2536975) and white-balanced against
 * the calibration card in the scan — not guessed. See docs/source-capture-proof.html
 * and assets/source/_color_calibration.json.
 *
 * PALETTE PHILOSOPHY: 3 colors. Paper + ink + one accent.
 * Ink (sumi) carries ALL structure — headers, body, rules, frames. The accent
 * is RARE — one mark per page (crystals, the stamp). Paper and ink are sampled
 * from the book; the accent is bero-ai (Prussian blue), the period-exact pigment
 * of the book's own era — see brand/narrative.md. Fewer tokens = consistent by
 * default. (Vermillion kept as a documented alternate accent, not primary.)
 *
 * INTERFACE PRINCIPLE — match the medium's honest form. Outward-facing brand
 * pieces (menu/deck/noren/site) earn full editorial treatment. Internal tools &
 * analysis (models, digests, viewers) stay utilitarian: a spreadsheet looks like
 * a spreadsheet, not a website. Brand shows through restraint (paper + ink + one
 * rare accent + mono numerals + a single hairline), never decoration — no hero
 * tiles, pills, cards, or gradients. "We don't build snowmen." Full rule + a
 * reference build (analysis/menu-digest-viewer.html) in docs/context/03.
 */

/* Web fonts loaded HERE so importing this file gives both the tokens and the
   typefaces — one place drives the whole system. Weight set covers every material. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Shippori+Mincho:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@300;400&display=swap');

:root {
  /* ---- Color (sampled from the 1832 scans) ---- */
  --kami:       #F1E9DC;  /* washi paper (lifted leaf) — DEFAULT background everywhere */
  --kami-deep:  #E6DACA;  /* true aged washi — cover panels, aged/emphasis surfaces */
  --sumi:       #171C1A;  /* carbon ink, faint cool — ALL type, rules, frames */
  --sumi-soft:  #56544E;  /* aged/diluted ink — secondary text, captions */

  /* ---- THE ACCENT: bero-ai (Prussian blue) ----
     The rare accent — crystals, stamps, one mark per page. Period-exact: the
     imported pigment of Edo ukiyo-e, contemporaneous with the 1832 book.
     See brand/narrative.md. */
  --bero-ai:      #1B3A5C;  /* Prussian blue — THE accent */
  --bero-ai-deep: #12314F;  /* deepened — dense small text on cream */

  --fox:        #C0A084;  /* foxing / age tone — warm alternate for hairlines */
  --line:       #56544E;  /* THE divider knob — hairlines, rules, dotted leaders, box outlines.
                             One value drives every hairline across all materials. (muted ink) */

  /* Alternate accent (documented, not primary): hanko vermillion — the
     collector's-seal red sampled from the book. Swap in for a warm treatment. */
  --hanko:      #C6503A;  /* seal vermillion (true) */
  --hanko-deep: #A83D2B;  /* deepened seal */

  /* Reference-only (NOT part of the working palette):
     --beni cover ground #E0764F — the vermillion title cover. Use for a full
     cover panel echo, never as UI accent. */
  --beni-cover: #E0764F;

  /* ---- Type (3 roles, never mixed) ---- */
  --font-display: "EB Garamond", "Shippori Mincho", Georgia, serif;
    /* logotype/display. Latin renders in EB Garamond; kanji (雪華) has no Latin-face
       glyphs, so it falls through to Shippori Mincho automatically. Change the first
       family here to reface every material. */
  --font-body:    "IBM Plex Sans", system-ui, sans-serif; /* body — "read at length" */
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace; /* prices, dates — "measured" */
  /* short aliases used by the material mockups (menu, sleeve, …) — same values */
  --fd: var(--font-display);
  --fb: var(--font-body);
  --fm: var(--font-mono);

  /* ---- Spacing (8px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px;
}

/* ---- Signature layout motif: "the plate" ----
 * Double-rule frame (outer ink line, inner hairline) mimicking the book's own
 * ruled 2×3 grid. Universal container across menu, card, and deck.
 */
.plate {
  background: var(--kami);
  border: 2px solid var(--sumi);
  box-shadow: inset 0 0 0 1px var(--fox);
  padding: var(--space-6);
}

/* ---- BUILD CONSTRAINT (do not remove) ----
 * Brand HTML must use FLEXBOX + PLAIN ES5 JS. CSS Grid + ES6 broke an older QA
 * renderer (page height ballooned ~3,000px → ~7,800px). No CSS Grid, no arrow
 * functions / template literals in files meant for that QA path.
 */