/* 한밤 - design tokens.
   Source of truth for the page. js/lib/palette.js mirrors these for canvas code.

   Five type steps, one per job: small / body / lead / head / display.
   The display step is fitted in JS to the exact page width (no-JS fallback = 13.2vw). */
:root {
  color-scheme: dark;

  /* colour roles: one ground, one ink, one accent */
  --bg: #0A0B0E;
  --bg-2: #11141A;
  --ink: #E7E5DF;
  --ink-soft: #A39C8F;
  --accent: #F2B544;
  --accent-ink: #15100A;
  --accent-hover: #FFC85E;

  /* chapter fields */
  --field-christmas: #0B1511;
  --field-bell: #0C0A08;
  --field-fireworks: #070C19;
  --field-sunrise: #1A2038;

  /* type - one family for display, one for text; five sizes */
  --font-display: "Black Han Sans", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-text: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "AppleGothic", sans-serif;

  --step-small: 13px;
  --step-body: clamp(17px, 1.25vw, 18px);
  --step-lead: clamp(21px, 1.8vw, 26px);
  --step-head: clamp(34px, 4.2vw, 60px);
  --monument-size: 13.2vw; /* fitted to the exact width by js/main.js; this is the no-JS value */

  /* space: one pair of equal outer margins on the whole page */
  --margin: clamp(18px, 2.2vw, 34px);
  --head-h: 58px;
  --gap-section: clamp(72px, 7.6vw, 110px);
  --gap-block: clamp(28px, 3vw, 48px);

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-reveal: 720ms;
}