:root {

  --ink: #1a2440;
  --ink-soft: #47536b;
  --muted: #556278;
  --line: #d7dee8;
  --line-soft: #e9edf3;

  --paper: #eef1f6;
  --surface: #ffffff;
  --board: #dfe5ee;
  --night: #12192c;
  --night-2: #0c111f;

  --accent: #d9a52c;
  --accent-strong: #755712;
  --accent-soft: #f0c877;
  --accent-tint: rgba(217, 165, 44, 0.15);

  --teal: #35577a;

  --ok: #2f6b3a;
  --danger: #9b2c2c;

  --shadow-sm: 0 2px 10px rgba(26, 36, 64, 0.08);
  --shadow: 0 16px 40px rgba(26, 36, 64, 0.13);
  --shadow-lg: 0 28px 64px rgba(26, 36, 64, 0.19);

  --radius-sm: 0.4rem;
  --radius: 0.8rem;
  --radius-lg: 1.2rem;

  --font-body: "Noto Sans JP Sub", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-head: "Noto Sans JP Sub", "Hiragino Sans", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;

  --max: 1160px;
  --gutter: 1.25rem;
  --topbar-h: 3.6rem;
  --topbar-utility-h: 2.1rem;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 960px) {
  :root { --gutter: 1.15rem; }
}
@media (max-width: 480px) {
  :root { --gutter: 1rem; --topbar-utility-h: 2.6rem; }
}