/* ==========================================================================
   Design Tokens
   将来の追加ページ（料金・FAQ・診断・ブログ等）でも本ファイルを共通で読み込むこと。
   値の変更はここに集約し、個別ページCSSでの上書きは避ける。
   ========================================================================== */
:root {
  /* --- Color / Surface --------------------------------------------- */
  --color-paper: #FAF9F5;
  --color-paper-deep: #F2EFE7;
  --color-surface: #FFFFFF;

  --color-ink: #14171C;
  --color-ink-soft: rgba(20, 23, 28, 0.66);
  --color-ink-faint: rgba(20, 23, 28, 0.62); /* WCAG AA (4.5:1) を#FAF9F5背景で確保 */

  --color-navy: #161B24;
  --color-navy-deep: #0D1017;
  --color-on-navy: #F3F1EA;
  --color-on-navy-soft: rgba(243, 241, 234, 0.66);

  --color-gold: #C9A544;
  --color-gold-bright: #F0CB64;
  --color-gold-soft: rgba(201, 165, 68, 0.14);

  --color-mist: #7E97A6;
  --color-sage: #8B9A85;

  --color-line: rgba(20, 23, 28, 0.12);
  --color-line-on-navy: rgba(243, 241, 234, 0.16);

  /* --- Typography ----------------------------------------------------- */
  --font-serif: "Shippori Mincho", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-sans: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-small: 0.8125rem;
  --fs-h1: clamp(2.1rem, 1.5rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);

  --lh-tight: 1.4;
  --lh-body: 1.9;

  --ls-kicker: 0.22em;

  /* --- Spacing scale ---------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;
  --space-8: 112px;
  --space-9: 160px;

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1180px;
  --container-pad: clamp(20px, 5vw, 64px);
  --prose-max: 34rem;

  /* --- Radius / Border ------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 0.9s;
  --dur-fast: 0.25s;
}