/* tokens.css — デザイントークン（CSS変数）だけを定義。色・フォント・余白・角丸・影・幅の唯一の出所。
   業種の雰囲気を変えるときは、このファイルは触らず themes/ でこれらの変数を上書きする。
   既定テーマ = 中立で上品な「濃紺 × 白 + アクセント1色（ティール）」。
   主要な文字/背景の組合せは WCAG 2.2 AA（通常文字 4.5:1 以上）を計算確認済み（値は README 参照）。 */

:root {
  /* ---- 色: ブランド ---- */
  --color-primary: #1F3A5F;         /* 見出し・主要ボタン背景・フッター背景。白文字と 11.48:1 */
  --color-primary-hover: #16304F;   /* 主要ボタンのホバー */
  --color-secondary: #2C5282;       /* 補助の濃色。白背景の文字として 7.97:1 */
  --color-accent: #0E7490;          /* リンク・アクセントボタン背景。白背景で 5.36:1 */
  --color-accent-hover: #0C6379;    /* アクセントのホバー */

  /* ---- 色: 面と文字 ---- */
  --color-bg: #FFFFFF;              /* ページ背景 */
  --color-surface: #F4F6F9;         /* カード・帯の面（淡い） */
  --color-surface-2: #ECEFF4;       /* 交互配置バンド用のもう一段の面 */
  --color-text: #1A2733;           /* 本文。白背景 15.20:1 / surface 14.04:1 */
  --color-text-muted: #55616C;     /* 補足文字。白背景 6.34:1 / surface 5.86:1 */
  --color-border: #DCE1E7;         /* 罫線・枠 */

  /* ---- 色: 反転文字（濃色面の上に載せる文字） ---- */
  --color-on-primary: #FFFFFF;     /* primary/secondary 面の上の文字 */
  --color-on-accent: #FFFFFF;      /* accent 面の上の文字。5.36:1 */

  /* ---- 色: フッター（背景 = primary） ---- */
  --color-footer-bg: var(--color-primary);
  --color-footer-text: #E8EDF1;    /* 全4テーマの primary 上で 5.36:1 以上 */
  --color-footer-muted: #D6DEE3;   /* 全4テーマの primary 上で 4.64:1 以上 */

  /* ---- 色: 状態・部品 ---- */
  --color-focus: #1669D6;          /* フォーカスリング。白背景 5.22:1（非文字は3:1でよいが余裕を確保） */
  --color-focus-light: #EAF1F8;    /* 濃色面用の明色リング。全テーマの primary/secondary 上で 3:1 以上 */
  --color-input-border: #828A93;   /* 入力欄の枠線。非テキスト3:1（白/温白背景で 3.41〜3.50:1） */
  --color-required: #A3272D;       /* 「必須」ラベル。白背景 7.28:1 */
  --color-success-bg: #E3F3EC;     /* 送信完了メッセージの背景 */
  --color-success-text: #0B5D46;   /* 同 文字。背景上 6.86:1 */
  --color-error-bg: #FCE9E9;       /* エラーメッセージの背景 */
  --color-error-text: #A3272D;     /* 同 文字。背景上 6.23:1 */

  /* ---- フォント: OS標準の日本語スタック（外部Webフォントを使わない） ---- */
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Meiryo", "MS PGothic",
    system-ui, sans-serif;
  --font-heading: var(--font-body); /* 見出しも同スタック（太さで差をつける） */
  --font-weight-body: 500;   /* Windows Yu Gothic の 400 はやせ細るため本文は 500 */
  --font-weight-medium: 600; /* ラベル・ナビ等の軽い強調 */
  --font-weight-bold: 700;

  /* ---- 文字サイズ（流体） ---- */
  --fs-base: 1rem;                 /* 16px 基準 */
  --fs-h1: clamp(1.75rem, 4.5vw, 2.6rem);
  --fs-h2: clamp(1.4rem, 3vw, 1.9rem);
  --fs-h3: clamp(1.1rem, 2vw, 1.3rem);
  --fs-small: 0.875rem;
  --line-height-body: 1.8;
  --line-height-heading: 1.5;

  /* ---- 余白スケール（8px系ベース） ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --section-py: clamp(2.5rem, 6vw, 4rem); /* セクション上下の標準余白 */

  /* ---- 角丸 ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- 影 ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* ---- レイアウト幅 ---- */
  --container: 1080px;             /* 標準コンテナ */
  --container-narrow: 720px;       /* フォーム・記事など読み幅 */
  --container-pad: 1.25rem;        /* コンテナ左右パディング */

  /* ---- タップ領域（アクセシビリティ） ---- */
  --tap-min: 44px;

  /* ---- モーション ---- */
  --transition: 0.18s ease;
}