/* EIWA · design tokens (spec §3). Colours, type scale, spacing, motion. */
:root {
  /* colour */
  --paper: #f3f3f2;
  --paper-2: #e6e6e4;
  --ink: #1c1c1c;
  --ink-2: #6b6b6b;
  --mute: #6f6f6f;    /* small grey text: 4.5:1 on --paper (WCAG AA, test/contrast.test.js) */
  --mute-lg: #8a8a8a; /* the old light grey: large text and decorative glyphs only */
  --pink: #ffa4d0;
  --pink-ink: #e89bbf;
  --s-spring: #d5fbe6;
  --s-summer: #c6e472;
  --s-autumn: #ffcba3;
  --s-winter: #a1bce7;
  --season: var(--mute); /* set from the 72-season calendar by js/motion/setup.js */

  --line: rgba(28, 28, 28, .12);
  --line-strong: rgba(28, 28, 28, .28);
  --ghost: #dcdcda; /* large decorative figures, e.g. «404» */
  --focus: var(--ink);

  /* kalka (translucent panels) */
  --kalka-bg: rgba(247, 247, 246, .62);
  --kalka-blur: .875rem;
  --kalka-border: rgba(255, 255, 255, .7);

  /* type */
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --fs-display: clamp(2.5rem, 6vw, 6rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 3.25rem);
  --fs-body: 1.0625rem;
  --fs-label: .8125rem;
  --lh-body: 1.5;
  --tracking-sc: .12em;

  /* safe areas (viewport-fit=cover): notch / Dynamic Island on top, home indicator below, both sides in landscape */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /* space — the gutter never lets content slide under a landscape notch; full-bleed backgrounds still bleed */
  --gutter: max(clamp(1rem, 3.2vw, 3rem), var(--safe-x));
  --header-bar: 4.5rem;                             /* the visible bar */
  --header-h: calc(var(--header-bar) + var(--safe-t)); /* what it covers: every sticky offset reads this */
  --section-y: clamp(4.5rem, 10vw, 10rem);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .2s;
  --dur: .45s;

  /* layers */
  --z-header: 50;
  --z-panel: 80;
}

@media (max-width: 899px) {
  :root { --header-bar: 3.75rem; }
}

/* Large screens: every size is in rem, so growing the root grows the whole composition — type, spacing,
   header, panels, ruler labels — and a 2560 monitor shows an enlarged 1440 layout, not a stretched one.
   100% — the guest's own default (16px unless they chose larger) — up to 1728 (MacBook Pro 16), then two gentle ramps:
   20px at 1920 (×1.25) and 28.44px at 2560 (×1.78 = 2560 / 1440), capped there.
   Media queries stay in px and mean CSS-px of the window, as before. */
html { font-size: 100%; }
@media (min-width: 1729px) {
  html { font-size: clamp(16px, min(16px + (100vw - 1728px) * .0208333, 20px + (100vw - 1920px) * .0131944), 28.444px); }
}