/* ==========================================
   Tobihato ブランド変数（指示文⑯）

   ⚠ ブランドカラーはロゴ画像のピクセルを GD で実測した値。
     目視や推測ではない。抽出元と根拠は各行のコメントに記す。
     再抽出したい場合は「サービスのロゴマーク.jpg」の
     アイコン部（x108,y101 から 447x380）を数え上げること。

   このファイルは app.css より先に読み込むこと。
   ========================================== */

:root {
  /* ---- ブランドカラー（ロゴから実測）---- */
  /* 角丸アイコンの地色・OGP背景の最頻色（78,148px）。ブランドの基準色 */
  --color-navy-900: #0C244C;
  /* 鳩の胴体（8,481px）。navy-900 よりわずかに青寄りで明るい */
  --color-navy-700: #082858;
  /* 翼のメインブルー（2,721px）。アクセント・ボタン・リンクの基準色 */
  --color-blue-500: #0860E0;
  /* 翼のサブブルー（1,225px）。装飾専用。白背景でのコントラストは2.97:1しかないため
     本文やリンクの文字色には使わないこと */
  --color-blue-300: #4898F4;

  /* ---- 派生色（実測値から機械的に算出）---- */
  --color-navy-800: #293E61;   /* navy-900 を12%明るく */
  --color-navy-600: #143059;   /* navy-900 を青寄りに寄せた明色。CTAのグラデーション終端 */
  --color-blue-600: #0650BB;   /* blue-500 を暗く。ホバー用 */
  --color-blue-100: #D7E8FD;   /* blue-300 を22%の濃さ。境界線用 */
  --color-blue-50:  #EDF5FE;   /* blue-300 を10%の濃さ。背景用 */

  /* ---- 背景 ---- */
  --color-bg-white:  #FFFFFF;
  --color-bg-light:  #F7F9FC;
  --color-bg-muted:  #ECEFF3;  /* バッジ・ゲージの下地など、白より一段沈めたい面 */

  /* ---- テキスト ---- */
  --color-text-primary:   var(--color-navy-900);
  --color-text-secondary: #5B6A80;  /* 白背景で5.50:1。WCAG AA（本文）を満たす */
  --color-text-inverse:   #FFFFFF;

  /* ---- 境界線 ---- */
  --color-border:       #E2E6EC;
  --color-border-input: #CBD2DA;
  --color-border-hair:  rgba(12, 36, 76, 0.06);  /* カードの極細の枠 */
  --color-disabled:     #B9C2CC;

  /* ---- 状態色（既存の配色を踏襲）---- */
  --color-danger:     #C0392B;
  --color-danger-bg:  #FDECEB;
  --color-danger-line:#F5C6C2;
  --color-ok:         #1E7F4F;
  --color-ok-bg:      #E9F6EF;
  --color-ok-line:    #BFE3D0;
  --color-warn:       #B7791F;
  --color-warn-bg:    #FDF5E6;
  --color-warn-line:  #F0DCB4;

  /* ---- 影（ネイビーを混ぜた影。黒い影より沈んで見えない）----
     ⚠ カードには2段重ねの --shadow-card / --shadow-card-hover を使う。
       近い影で輪郭を、遠い影で浮きを作ると、1本の影より立体に見える。 */
  --shadow-sm: 0 1px 3px rgba(12, 36, 76, 0.08);
  --shadow-md: 0 4px 12px rgba(12, 36, 76, 0.10);
  --shadow-lg: 0 12px 32px rgba(12, 36, 76, 0.14);

  --shadow-card:       0 1px 2px rgba(12, 36, 76, 0.04), 0 8px 24px rgba(12, 36, 76, 0.08);
  --shadow-card-hover: 0 2px 4px rgba(12, 36, 76, 0.06), 0 16px 40px rgba(12, 36, 76, 0.14);
  /* ヒーロー画像。平坦に見えないよう、他より一段強くする */
  --shadow-hero:       0 20px 60px rgba(12, 36, 76, 0.16), 0 4px 16px rgba(12, 36, 76, 0.08);
  /* ボタンのホバー。青みがかった影にして「光った」ように見せる */
  --shadow-glow:       0 4px 16px rgba(8, 96, 224, 0.32);

  --radius: 8px;

  /* ---- 旧変数の別名 ----
     app.css と全テンプレートが以下の名前を使っている。
     一括で書き換えると既存画面の差分が読めなくなるため、別名として残す。
     新しく書くCSSでは上のブランド変数の方を使うこと。 */
  --bg: var(--color-bg-light);
  --fg: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --card: var(--color-bg-white);
  --accent: var(--color-blue-500);
  --accent-dark: var(--color-blue-600);
  --danger: var(--color-danger);
  --ok: var(--color-ok);
  --warn: var(--color-warn);
}