/* ============================================================
   variables.css
   ★ 色・フォント・サイズの「設定パネル」です。
   ============================================================ */

:root {
  /* 色 */
  --color-bg:      #ffffff;
  --color-bg-alt:   #ffffff;
  --color-ink:     #4e4c4c;
  --color-ink-soft: #6E6D64;
  --color-line:    #D9D7CC;
  --color-accent:  #1B3AE0; /* リンクや強調に使う唯一の差し色 */

  /* フォント: Courier系のみ。和文はシステムの等幅フォントにフォールバックします */
  --font-mono: 'Courier Prime', 'Courier New', 'SFMono-Regular', Consolas,
               'MS Gothic', 'Osaka-Mono', monospace;

  /* 文字サイズ(全体的に小さめ) */
  --text-xs:  0.7rem;
  --text-sm:  0.8rem;
  --text-base: 0.85rem;
  --text-md:  0.95rem;
  --text-lg:  1.1rem;

  /* 余白 */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;

  --content-width: 1100px;
  --gutter: 5vw;

  --duration-fast: 150ms;
  --duration-mid: 300ms;
  --duration-slow: 700ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* 急に止まらず滑らかに減速する。ページ読み込み演出用 */
}