:root {
  --ym-bg: #f7f3ee;
  --ym-surface: #fff;
  --ym-surface-soft: #fff8f3;
  --ym-text: #302d2d;
  --ym-muted: #746d68;
  --ym-border: #e8ded6;
  --ym-primary: #a8483d;
  --ym-primary-hover: #8e3c33;
  --ym-coral: #e9a382;
  --ym-rose: #e6a5b2;
  --ym-sage: #a7c7b7;
  --ym-sand: #eed9a6;
  --ym-ink: #342f2a;
  --ym-container: 1180px;
  --ym-article: 760px;
  --ym-gutter: 16px;
  --ym-space-1: 4px;
  --ym-space-2: 8px;
  --ym-space-3: 12px;
  --ym-space-4: 16px;
  --ym-space-5: 24px;
  --ym-space-6: 32px;
  --ym-space-7: 48px;
  --ym-space-8: 64px;
  --ym-space-9: 80px;
  --ym-radius-sm: 8px;
  --ym-radius-md: 12px;
  --ym-radius-lg: 18px;
  --ym-radius-pill: 999px;
  --ym-shadow: 0 8px 24px rgba(75, 54, 44, 0.08);
  --ym-shadow-hover: 0 14px 32px rgba(75, 54, 44, 0.13);
  --ym-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
  --ym-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}

@media (min-width: 768px) {
  :root { --ym-gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --ym-gutter: 32px; }
}