:root {
  /* Brand */
  --color-primary: #94252a;
  --color-primary-hover: #7c1e22;
  --color-gold: #cca55d;
  --color-gold-deep: #a9770a;
  --color-gold-text: #c8a84b;
  --color-dark: #231815;
  --color-banner: #221814;
  --color-drawer: #241815;
  --color-shari: var(--color-dark);
  --color-neta-orange: #d97706;
  --color-accent: var(--color-primary);
  --color-accent-hover: var(--color-primary-hover);

  /* Surface */
  --color-bg: #f6eee0;
  --color-revenue: #e8dac3;
  --color-pill: #dfccae;
  --color-surface: #ffffff;
  --color-surface-warm: #fffaee;
  --color-surface-alt: #fbf8ef;
  --color-surface-muted: #f3e9dc;
  --color-surface-faq: #fdfbf7;
  --color-surface-selected: #f9f1e0;
  --color-icon-bg: #f5ecd7;

  /* Text */
  --color-text: #111111;
  --color-text-inverse: #ffffff;
  --color-text-body: #4b5563;
  --color-muted: #66615c;
  --color-text-subtle: #8e8680;
  --color-text-hint: #6b7280;
  --color-text-placeholder: #9ca3af;

  /* Border */
  --color-border: #d7ccc8;
  --color-border-gold: #b7aa91;
  --color-border-card: #d2c1a7;
  --color-border-strong: #af884f;
  --color-border-table: #e2c185;
  --color-border-accent: #c39e6c;

  /* Feedback */
  --color-required: #ef4444;
  --color-optional: #f9fafb;

  --font-primary: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: var(--font-primary);
  --leading: 1.4;

  /* コンテンツ最大幅 */
  --size-inner: 1200px;
  --size-btn-width: 300px;
  --size-btn-height: 36px;

  /* サイド余白: SP 16px / PC 24px */
  --space-gutter: 16px;

  /* ブレークポイント（参照用。@media には数値を直接書く）
     SP: 768px以下 / PC: 769px以上
     ヘッダーのみ 1024px以上でPC
     インナー幅1200pxの完成形は 1280px以上
     余白（padding / margin / gap）は4の倍数 */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  --radius: 4px;
}

@media (min-width: 769px) {
  :root {
    --space-gutter: 24px;
  }
}