/* Editorial Mono - design-system.md v1 (2026-10-12). Only place with raw values. */
:root {
  /* colors */
  --fog: #E7E6E3;
  --paper: #F4F3F1;
  --ink: #0E0E0E;
  --ink-soft: #1C1C1B;
  --muted: #6B6A67;
  --muted-dark: #9A9995;
  --line: rgba(14, 14, 14, 0.16);
  --line-dark: rgba(244, 243, 241, 0.16);
  --accent: #E2341D;

  /* type */
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-monoword: clamp(80px, 21.5vw, 300px);
  --fs-h1: clamp(30px, 3.2vw, 46px);
  --fs-h2: clamp(38px, 4.6vw, 64px);
  --fs-h3: 26px;
  --fs-body-l: 18px;
  --fs-body: 15px;
  --fs-label: 12px;
  --fs-button: 13px;
  --fs-price: 44px;

  /* space (4/8 grid) */
  --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px; --s-160: 160px;
  --container: 1200px;
  --gutter: 40px;
  --section-y: 128px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .5s;
}

@media (max-width: 768px) {
  :root { --gutter: 20px; --section-y: 72px; }
}