/* =========================================================
   tokens.css - デザイントークン
   サイト全体の見た目はこのファイルの変数で決まります。
   色や余白を変えたいときは、原則ここだけを編集してください。
   ========================================================= */

:root {
  /* ---------- 色 ----------
     白基調。境界は影ではなく 1px のヘアラインで表現します。 */
  --c-bg:            #ffffff;   /* ページ背景 */
  --c-surface:       #fafafb;   /* 面（カード・入力欄の背景） */
  --c-surface-2:     #f4f5f7;   /* 一段沈んだ面 */
  --c-border:        #e8eaef;   /* 通常の罫線 */
  --c-border-strong: #d5d9e2;   /* 強調したい罫線 */

  --c-ink:    #0f1115;          /* 主要テキスト */
  --c-ink-2:  #3f444e;          /* 副次テキスト */
  --c-muted:  #6b7280;          /* 補助・キャプション */

  --c-accent:      #4c6fff;     /* アクセント（一点使い） */
  --c-accent-ink:  #3355e0;     /* アクセントのホバー／文字色 */
  --c-accent-weak: #eef2ff;     /* アクセントの淡い面 */

  --c-ok:     #0e9f6e;
  --c-danger: #d93a3a;

  /* ---------- 余白（8px スケール） ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---------- 角丸 ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-full: 999px;

  /* ---------- 書体 ----------
     Web フォントは読み込みません（表示速度を優先）。
     数値は tabular-nums で桁を揃えます。 */
  --f-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
            "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
            Meiryo, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
            "Noto Sans Mono", monospace;

  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   26px;
  --t-2xl:  34px;

  --lh-tight: 1.3;
  --lh-base:  1.75;

  /* ---------- レイアウト ---------- */
  --w-page:   1120px;  /* 通常のコンテンツ幅 */
  --w-narrow: 760px;   /* 読み物・フォーム列の幅 */
  --h-header: 60px;

  /* ---------- 効果 ---------- */
  --dur:  120ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --shadow-sm: 0 1px 2px rgba(15, 17, 21, .04);
  --shadow-md: 0 6px 24px rgba(15, 17, 21, .07);
}