:root {
  

  --paper: #eeecf0;
  --surface: #f7f6f9;
  --board: #e3e0e9;
  --night: #241d31;
  --night-2: #1a1424;

  --ink: #23202a;
  --ink-soft: #4d4757;
  
  --muted: #625c6f;
  --line: #d6d2dd;
  --line-soft: #e6e3ec;

  
  --accent: #5b4479;
  
  --accent-strong: #43325c;
  
  --accent-soft: #a99bc2;
  --accent-tint: rgba(91, 68, 121, 0.1);

  
  --brass: #9c7c2a;
  
  --brass-strong: #7d6118;
  --brass-tint: rgba(156, 124, 42, 0.13);

  --ok: #2f6d4f;
  --warn: #8a5a12;

  --shadow-sm: 0 2px 10px rgba(35, 26, 52, 0.07);
  --shadow: 0 12px 34px rgba(35, 26, 52, 0.1);
  --shadow-lg: 0 26px 62px rgba(35, 26, 52, 0.14);

  
  --radius-sm: 0.12rem;
  --radius: 0.25rem;
  --radius-lg: 0.4rem;

  --font-head: "Klee One Sub", "Hiragino Mincho ProN", serif;
  --font-body: "M PLUS 2 Sub", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-mono: "Azeret Mono Sub", "SFMono-Regular", Consolas, monospace;

  --max: 1140px;
  --gutter: 1.4rem;
  --topbar-h: 4.6rem;
  --topbar-utility-h: 2.3rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 960px) { :root { --gutter: 1.2rem; } }
@media (max-width: 480px) { :root { --gutter: 1rem; --topbar-h: 4rem; } }