/* ============================================================
   TSUKUBA WEB — design tokens
   The only place raw values may exist. Every page consumes
   these variables; no component may introduce its own color,
   size, radius, or spacing value.
   System: void canvas, elevation by lightness, four-rung text
   ladder, one rationed accent (shu vermillion), three radii,
   4px spatial grid. See /design-system/ for the living spec.
   ============================================================ */

:root {
  /* ---- canvas & surfaces (elevation = lightness only) ---- */
  --void: #060606;        /* page canvas — never pure black */
  --surface: #141414;     /* raised cards, nav pill, form fields */
  --surface-2: #1b1b1b;   /* hover state of a raised surface */
  --hairline: #202020;    /* 1px borders everywhere */

  /* ---- text ladder (silver is body; white is rationed) ---- */
  /* #595959 doubles as the ONLY sanctioned non-hairline stroke:
     outlined buttons and form placeholders use it; all other
     borders stay #202020. No gray outside these four exists. */
  --ink-mute: #595959;    /* disabled meta, quietest labels, button outlines, placeholders */
  --ink-ash: #989898;     /* secondary text, section labels, headline tone 2 */
  --ink-silver: #b4b4b4;  /* ALL body text */
  --ink-white: #ffffff;   /* headings + key phrases only */

  /* ---- the one accent: shu vermillion (筑波山神社の鳥居の朱) ---- */
  /* Rationed: logo mark + at most one active/hover state per viewport. */
  --accent: #e8542f;

  /* ---- typography ---- */
  --font-display: "Barlow Condensed", "Noto Sans JP", sans-serif; /* wt 300 only */
  --font-body: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;

  --wt-display: 300;
  --wt-body: 400;
  --wt-body-strong: 500;

  /* type scale — no sizes outside this scale */
  --fs-label: 11px;       /* uppercase mono section labels */
  --fs-micro: 12px;       /* captions, meta, footer */
  --fs-body: 14px;        /* body default */
  --fs-body-lg: 15px;     /* lead paragraphs */
  --fs-mid: 22px;         /* card titles, prices context */
  --fs-price: 32px;       /* yen digits */
  --fs-display-s: 30px;   /* mobile display */
  --fs-display: 42px;     /* section display */
  --fs-display-l: 56px;   /* hero display (desktop) */

  --lh-display-jp: 1.22;  /* JP display lines */
  --lh-display-latin: 1.05;
  --lh-body-jp: 1.9;      /* JP body — never below 1.8 */
  --lh-compact: 1.4;      /* mono labels, meta */

  --ls-display: -0.02em;  /* display tracking, slightly negative */
  --ls-label: 0.14em;     /* tracked-out uppercase labels */
  --ls-latin-wide: 0.08em;

  /* ---- radii: exactly three ---- */
  --r-btn: 2px;
  --r-card: 6px;
  --r-container: 10px;

  /* ---- spacing: 4px grid ---- */
  --s-1: 4px;
  --s-2: 8px;    /* element gaps */
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-9: 36px;   /* card padding */
  --s-12: 48px;  /* block gaps */
  --s-20: 80px;
  --s-30: 120px; /* major section gaps (desktop) */
  --s-40: 160px;

  /* ---- layout ---- */
  --max-w: 1200px;
  --gutter: 24px;
  --rail-w: 300px; /* left rail width on desktop */

  /* ---- borders ---- */
  --border: 1px solid var(--hairline);
}