/* Design tokens — palette 01 (black / grey / warm neutral).
   Change colours and type here; components only reference these variables.
   Canvas colours live in js/story/config.js (keep the two in sync). */
:root {
  --bg: #EEEBE6;
  --bg-2: #E6E2DC;
  --paper: #F6F4F0;
  --ink: #232323;
  --ink-2: #3A3A3A;
  --mid: #A9A6A1;
  --muted: #6E6B66;
  --line: rgba(35, 35, 35, 0.14);
  --amber: #C98A4B;
  --dark: #1B1B1A;
  --dark-2: #262625;
  --on-dark: #F2EFEA;
  --on-dark-muted: rgba(242, 239, 234, 0.58);
  --line-dark: rgba(242, 239, 234, 0.16);

  --font-latin: "Jost", "Helvetica Neue", Arial, sans-serif;
  /* Chinese uses the visitor's system font (a webfont would be several MB). */
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font: var(--font-latin), var(--font-cjk);
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 64px);
  --max: 1440px;
  --nav-h: 72px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 700px) {
  :root { --nav-h: 60px; }
}