/* Design tokens — Direction A: editorial paper, ink, one signal color */

/* NanumSquare Neo Regular, self-hosted and subset to common Hangul (built by subset_font.py).
   The site sets no bold Korean, so there is no 700 face. */
@font-face {
  font-family: "NanumSquare Neo"; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/NanumSquareNeo-Rg-sub.woff2) format("woff2");
}

/* Arial tuned to Roboto's metrics, so the swap from fallback to Roboto barely moves the layout. */
@font-face {
  font-family: "Roboto Fallback"; src: local("Arial");
  size-adjust: 100.3%; ascent-override: 92.5%; descent-override: 24.3%; line-gap-override: 0%;
}

:root {
  --bg: #f1ede4;
  --bg-sunk: #e8e3d7;
  --ink: #151513;
  --muted: #6d6a62;
  --rule: #cfc9bb;
  --signal: #097540;
  --signal-ink: #f1ede4;

  /* Latin glyphs come from Roboto; Hangul falls through to NanumSquare Neo. */
  --font-display: Roboto, "Roboto Fallback", "NanumSquare Neo", "Apple SD Gothic Neo", sans-serif;
  --font-body: Roboto, "Roboto Fallback", "NanumSquare Neo", "Apple SD Gothic Neo", sans-serif;
  --font-mono: "Roboto Mono", "NanumSquare Neo", ui-monospace, monospace;

  /* Type roles. One size per job; display and numbers scale with the viewport, reading text barely. */
  --fs-label: 0.75rem;   /* mono labels, never smaller */
  --fs-meta: 0.875rem;
  --fs-body: 1rem;
  --fs-lede: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  --fs-h3: clamp(1.5rem, 1.05rem + 1.5vw, 2.5rem);
  --fs-h2: clamp(2rem, 1.1rem + 3.4vw, 4.25rem);
  --fs-stat: clamp(2.25rem, 1.2rem + 3.2vw, 4rem);
  --track-display: -0.03em;
  --track-heading: -0.02em;

  --gutter: clamp(20px, 6vw, 96px);
  --section: clamp(120px, 16vw, 240px);
  --bar-h: 57px; /* fixed top bar: 44px tap target + 12px padding + 1px rule */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11120f;
    --bg-sunk: #181915;
    --ink: #e9e6dd;
    --muted: #918d83;
    --rule: #2c2d28;
    --signal: #2fbf74;
    --signal-ink: #11120f;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #11120f;
  --bg-sunk: #181915;
  --ink: #e9e6dd;
  --muted: #918d83;
  --rule: #2c2d28;
  --signal: #2fbf74;
  --signal-ink: #11120f;
  color-scheme: dark;
}