:root {
  --color-paper: #f4f3ee;
  --color-white: #fcfcf8;
  --color-ink: #111311;
  --color-muted: #656963;
  --color-line: #caccc5;
  --color-soft: #e6e7e1;
  --color-accent: #244b5a;
  --color-dark: #0e1110;
  --color-dark-line: #373c39;
  --color-on-dark: #f7f7f2;

  --font-sans: "Helvetica Neue", "Noto Sans JP", "Hiragino Sans",
    "Yu Gothic", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas,
    monospace;

  --text-display: clamp(4rem, 7vw, 8.4rem);
  --text-page-title: clamp(3.6rem, 6.2vw, 7.2rem);
  --text-section: clamp(2.8rem, 4.4vw, 5.1rem);
  --text-card: clamp(1.7rem, 2.7vw, 3.2rem);
  --text-lead: clamp(1.3rem, 1.85vw, 2.2rem);
  --text-body: 1rem;
  --text-small: 0.78rem;
  --text-label: 0.65rem;

  --leading-tight: 0.92;
  --leading-heading: 1.08;
  --leading-body: 1.8;

  --tracking-display: -0.073em;
  --tracking-heading: -0.055em;
  --tracking-label: 0.065em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  --page-gutter: clamp(1.25rem, 3.5vw, 5rem);
  --section-space: clamp(6rem, 10vw, 11rem);
  --content-max: 100rem;
  --reading-max: 43rem;
  --header-height: 4.875rem;

  --border: 1px solid var(--color-line);
  --border-dark: 1px solid var(--color-dark-line);
  --radius-sm: 2px;
  --radius-md: 8px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 180ms;
  --duration-normal: 320ms;
}