/* Design tokens - the single source of truth for the whole site (D11,
   2026-09-01). Previously declared twice, in index.html's inline <style> and
   again at the top of styles.css, with 13 tokens drifting apart by hand.

   Linked by index.html (which keeps its page-specific CSS inline) and by the
   five pages that use styles.css. Kept separate from styles.css rather than
   folded into it, because index.html would then inherit that file's header,
   nav, brand and details rules on top of its own. */

:root {
  --tokiwa: #007B43;
  --tokiwa-deep: #005A31;
  --tokiwa-tint: #E3EFE5;
  --ground: #F5F7F3;
  --card: #FFFFFF;
  --ink: #17251C;
  --muted: #5A6B5F;
  --line: #DCE4DB;
  /* --line is decorative (1.30:1) and fine for section rules. Form controls
     need WCAG 1.4.11's 3:1 against BOTH the field fill and the page behind
     it, so the email input gets its own darker token. Light: 3.42:1 on
     --card, 3.17:1 on --ground. */
  --field-line: #7E8F82;
  --straw: #A87F2C;
  --straw-tint: #F5EDDA;
  --warn: #8A6410;
  --shadow: 0 1px 2px rgba(23,37,28,.05), 0 8px 24px rgba(23,37,28,.07);
  /* Glass phone bezel (2026-09-02): translucent fill, a hairline edge, and
     the highlight that reads as light on the rim. Tinted with the tokiwa
     green so the frame belongs to the page; light keeps a white highlight,
     dark uses the green one so the rim never reads as grey plastic. */
  --glass: rgba(0,123,67,.05);
  --glass-edge: rgba(0,123,67,.22);
  --glass-hi: rgba(255,255,255,.55);
  /* Latin-first (F1), with "Noto Serif" carrying Android: it has neither
     Iowan nor Georgia, so without this the cascade walks past both, skips the
     two Mincho faces it does not have, and lands English headings on Noto
     Serif JP's Latin glyphs - the exact weak-Latin-on-a-JP-face problem F1
     was written to fix. Generic serif would catch it correctly but sits
     behind the JP faces and is never reached. Noto Serif has no CJK
     coverage, so kana and kanji still fall through it to Noto Serif JP.
     Untested on a real Android or Windows device. */
  --serif: "Iowan Old Style", Georgia, "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;

  /* Type scale. Seven steps replacing 21 ad-hoc px values (F3, 2026-09-01).
     --t-lg is the body base. Headings are not on the scale: they use the
     three clamp() pairs in index.html, which already form one. The 290px/
     200px watermark is art, not type, and stays a documented one-off. */
  --t-xs:  11px;
  --t-sm:  13px;
  --t-md:  15px;
  --t-lg:  17px;
  --t-xl:  20px;
  --t-2xl: 26px;
  --t-3xl: 40px;

  /* Tracking (F4). Two jobs, two values: uppercase Latin labels, and the
     開拓 pulls. The h1 (-.01em) and the watermark (.04em) stay separate
     because tracking is size-dependent and those are 58px and 290px. */
  --track-caps: .14em;
  --track-jp: .25em;

  /* Radius (D5). Two box values replacing 8/12/14/16/18, plus the pill.
     --r-sm matches the app icon: the favicon SVG is rx=14 on 64px = 22%,
     and 22% of the 34px mark is 8px. Circles, the focus outline and the
     phone bezel are geometry, not decoration, and stay off the scale. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tokiwa: #1F9A62;
    --tokiwa-deep: #3CB57C;
    --tokiwa-tint: #17301F;
    --ground: #0D1410;
    --card: #16211A;
    --ink: #E6EDE7;
    --muted: #93A697;
    --line: #263528;
    /* 3.57:1 on --card, 4.02:1 on --ground */
    --field-line: #637A6A;
    --straw: #D3AC5B;
    --straw-tint: #2C2513;
    --warn: #D3AC5B;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --glass: rgba(60,181,124,.05);
    --glass-edge: rgba(60,181,124,.26);
    --glass-hi: rgba(60,181,124,.18);
  }
}