/* =============================================================
 * tokens.css — Money Step Office Design Tokens v0.4
 * 変更点: UIカラーの彩度を落として落ち着きを出す。
 *         ロゴカラーは --c-brand-logo に退避（別管理）。
 *         字間を日本語向けに再設計。
 * ========================================================== */

:root {
  /* --------------------------------------------------------
   * Color — ロゴ専用カラー
   *   ロゴマーク、ブランド露出の強いアイコン等で使用。
   *   UIコンポーネント（ボタン・リンク）では使わない。
   * -------------------------------------------------------- */
  --c-brand-logo: #0064b2;

  /* --------------------------------------------------------
   * Color — UI用ブランドスケール
   *   ロゴから彩度・明度を少し落として、長時間見ても疲れない色に。
   * -------------------------------------------------------- */
  --c-brand-900: #0e3f60; /* 最濃・ホバー・強調 */
  --c-brand-800: #1a5d8c; /* メイン */
  --c-brand-700: #2e73a2; /* やや明るめ */
  --c-brand-600: #4a8ab5;
  --c-brand-200: #b8d0df; /* 帯・アウトライン */
  --c-brand-100: #d9e5ed; /* 薄い背景 */
  --c-brand-50:  #eef3f7; /* さらに薄い */

  /* --------------------------------------------------------
   * Color — Accent（控えめに使う）
   * -------------------------------------------------------- */
  --c-accent: #b08d57; /* ゴールド系 */

  /* --------------------------------------------------------
   * Color — Text
   * -------------------------------------------------------- */
  --c-text:         #1a1f2b;
  --c-text-muted:   #5a6473;
  --c-text-subtle:  #8b95a5;
  --c-text-invert:  #ffffff;

  /* --------------------------------------------------------
   * Color — Surface
   * -------------------------------------------------------- */
  --c-bg:        #ffffff;
  --c-bg-alt:    #f7f8fa;
  --c-bg-brand:  var(--c-brand-800);
  --c-line:      #e4e7ec;
  --c-line-soft: #eff1f4;

  /* --------------------------------------------------------
   * Typography — Family
   * -------------------------------------------------------- */
  --ff-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
             "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --ff-num:  "Inter", "Noto Sans JP", sans-serif;

  /* --------------------------------------------------------
   * Typography — Weight
   * -------------------------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --------------------------------------------------------
   * Typography — Size（本文17px基準）
   * -------------------------------------------------------- */
  --fs-display: clamp(2.125rem, 1.6vw + 1.7rem, 2.875rem); /* 34-46px */
  --fs-h1:      clamp(1.875rem, 1.0vw + 1.6rem, 2.25rem);  /* 30-36px */
  --fs-h2:      clamp(1.5rem, 0.6vw + 1.3rem, 1.75rem);    /* 24-28px */
  --fs-h3:      1.25rem;    /* 20px */
  --fs-h4:      1.0625rem;  /* 17px */
  --fs-body:    1.0625rem;  /* 17px */
  --fs-lead:    1.125rem;   /* 18px */
  --fs-small:   0.9375rem;  /* 15px */
  --fs-caption: 0.875rem;   /* 14px */
  --fs-eyebrow: 0.75rem;    /* 12px */

  /* --------------------------------------------------------
   * Typography — Line Height
   * -------------------------------------------------------- */
  --lh-tight:    1.3;
  --lh-heading:  1.5;
  --lh-body:     1.8;
  --lh-loose:    1.95;

  /* --------------------------------------------------------
   * Typography — Tracking（日本語向けに再設計）
   *   欧文のクセで見出しを -0.01em 以下にすると日本語では詰まって見える。
   *   日本語見出しは 0、本文は 0.02em で少しゆとりを持たせる。
   * -------------------------------------------------------- */
  --tr-display:  -0.005em; /* Display級のみ、わずかに詰め */
  --tr-heading:   0;       /* h1〜h6 デフォルト（日本語はコレ） */
  --tr-body:      0.02em;  /* 本文・リードに少しゆとり */
  --tr-wide:      0.08em;  /* 英字のみの小ラベル */
  --tr-eyebrow:   0.14em;  /* 英字大文字・Eyebrow */

  /* --------------------------------------------------------
   * Layout
   * -------------------------------------------------------- */
  --container-max:    1120px;
  --container-narrow:  880px;
  --container-read:    720px;
  --container-pad:     clamp(1rem, 3vw, 2rem);

  /* --------------------------------------------------------
   * Spacing（8px基準）
   * -------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-py: clamp(3rem, 7vw, 5.5rem);

  /* --------------------------------------------------------
   * Icon
   * -------------------------------------------------------- */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  --icon-stroke: 1.75;

  /* --------------------------------------------------------
   * Radius / Shadow / Motion / Z-index
   * -------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(20, 30, 50, 0.04);
  --sh-md: 0 4px 16px rgba(20, 30, 50, 0.06);
  --sh-lg: 0 12px 32px rgba(20, 30, 50, 0.08);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  180ms;

  --z-header: 100;
  --z-modal:  1000;
}