/* Design tokens. Everything visual references these; nothing hardcodes a colour. */

:root {
  /* Warm paper + ink, one editorial accent. */
  --bg: #f7f6f2;
  --surface: #ffffff;
  --surface-sunk: #f1efe9;
  --ink: #16181c;
  --ink-soft: #5b6068;
  --ink-faint: #8b9099;
  --line: #e4e2da;
  --line-strong: #cfccc1;
  /* The icon's own pair, sampled from brand/app-icon-1024.png: golden yellow #fdc21b with
     navy #06265d. Yellow works as a *fill* only — on the paper background it reads at 1.5:1,
     so anything that has to be read (links, thin rules, the focus ring) uses --accent-text.
     Navy on yellow measures 8.9:1, so it is the ink.
   *
   * --accent-text is a link blue, not the navy and not a darkened yellow. Navy passes AA
   * easily (13.5:1) but reads as "more black": at 1.22 luminance contrast from the ink, the
   * separation a reader needs is missing. Hue is what was missing, not darkness — 210° blue
   * against 45° yellow is near-complementary, so it separates from black text while sitting
   * with the accent instead of against it.
   *
   * This is CSS `orange`, written out (#ffa500), chosen on sight. It measures 1.83:1 on this
   * paper — well under the 4.5 AA wants for body text. It reads as punchy anyway because the
   * *chroma* gap against the warm grey paper is large, but chroma does not carry legibility
   * for small text; luminance does. Links in prose are underlined, so they are still
   * identified by more than colour (WCAG 1.4.1); what is traded is how easy the link text
   * itself is to read for someone with low vision.
   *
   * Same family, if that trade ever needs revisiting: #c2370f (5.05:1, the red-orange this
   * site used before) or #b35400 (4.64:1, browner).
   *
   * The dark theme needs none of this: there the yellow is 11.6:1 on near-black. */
  --accent: #fdc21b;
  --accent-ink: #06265d;
  --accent-text: #ffa500;
  --accent-soft: #fff4cc;
  --ok: #1f7a4d;
  --warn: #a8620a;
  --danger: #b3261e;

  /* CJK-first and rounded: Noto Sans where installed, then the platform's soft CJK
     faces (PingFang / YaHei / Hiragino Maru Gothic), and only then the generic UI
     font. Softer to read in Chinese than the system UI face. */
  --font-sans: 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'PingFang SC', 'Microsoft YaHei',
    'Hiragino Maru Gothic ProN', 'Yu Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Monospace is kept for code, tags, dates and labels — it is part of the site's
     identity. The CJK faces are appended so Chinese comments inside code blocks render
     with the same soft face rather than an arbitrary fallback. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
    'Noto Sans SC', 'PingFang SC', 'Hiragino Maru Gothic ProN', 'Microsoft YaHei', monospace;

  --step--2: 0.72rem;
  --step--1: 0.82rem;
  --step-0: 1rem;
  --step-1: 1.18rem;
  --step-2: 1.42rem;
  --step-3: 1.78rem;
  --step-4: 2.3rem;
  --step-5: 3rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Concentric radii: inner = outer - padding. */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgb(20 18 15 / 0.05), 0 2px 6px rgb(20 18 15 / 0.04);
  --shadow-2: 0 2px 4px rgb(20 18 15 / 0.06), 0 12px 28px rgb(20 18 15 / 0.09);

  /* Faint enough to separate tiles without reading as a table. */
  --hairline: color-mix(in oklab, var(--line) 62%, transparent);
  /* The brand tile stays dark in both themes: inverting --ink made it a glaring white
     square in dark mode. */
  /* The hero is a tile, so it wears the same surface and ink as any other tile and follows the
     theme with them. It is deliberately *not* its own colour: as a colour block it either
     merged into the page background or fought the wordmark. */
  --hero-bg: var(--surface);
  --hero-ink: var(--ink);
  /* Tile proportions: width : height = φ : 1 (landscape golden rectangle). */
  --phi: 1.618;
  /* Minimum tile width; the grid fits as many columns as the viewport allows. */
  --wall-min: 280px;
  --wrap: 1360px;
  --article-measure: 44rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Without this the browser renders form controls, <select> popups and scrollbars in
     light chrome even on a dark page. */
  color-scheme: light;
}

/* The site is trilingual and sets <html lang>, so each language can put its own face
   first: Japanese kana have visibly better forms in a Japanese font than in PingFang. */
html[lang='ja'] {
  --font-sans: 'Noto Sans JP', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic',
    'Noto Sans SC', 'PingFang SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Dark palette, applied by explicit choice... */
:root[data-theme='dark'] {
  --bg: #101113;
  --surface: #191b1e;
  --surface-sunk: #141518;
  --ink: #eceef1;
  --ink-soft: #a2a8b2;
  --ink-faint: #767c86;
  --line: #2a2d32;
  --line-strong: #3c4046;
  --hairline: color-mix(in oklab, #2a2d32 78%, transparent);
  /* On near-black the yellow is legible as text too (11:1), so --accent-text is the yellow
     here rather than a second hue. Fills keep the navy ink. */
  --accent: #fdc21b;
  --accent-ink: #06265d;
  --accent-text: #fdc21b;
  --accent-soft: #3b2f0b;
  --ok: #4fc98a;
  --warn: #e0a44a;
  --danger: #ff6b60;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 14px 32px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

/* ...or inherited from the OS when the reader has not chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #101113;
    --surface: #191b1e;
    --surface-sunk: #141518;
    --ink: #eceef1;
    --ink-soft: #a2a8b2;
    --ink-faint: #767c86;
    --line: #2a2d32;
    --line-strong: #3c4046;
    --hairline: color-mix(in oklab, #2a2d32 78%, transparent);
    --accent: #fdc21b;
    --accent-ink: #06265d;
    --accent-text: #fdc21b;
    --accent-soft: #3b2f0b;
    --ok: #4fc98a;
    --warn: #e0a44a;
    --danger: #ff6b60;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 14px 32px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

/* Narrower minimum => more columns; the tile itself is always square. */
@media (max-width: 620px) {
  :root {
    --wall-min: 180px;
    --step-5: 2.2rem;
    --step-4: 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: linear;
  }
}