/* =========================================================
   デザイントークン
   デザイン方向性が確定したら、原則このファイルだけを差し替える。
   色・余白・文字サイズの実値をここに閉じ込めてあるため、
   テンプレートやコンポーネントCSSに手を入れずに見た目を変えられる。
   現在の値は方向性A（日本メーカーの実直・信頼型）を想定した暫定値。
   ========================================================= */
:root {
  /* ライト固定。宣言しないとOSダークモード時にinput/selectだけ暗く描画され、
     白いカードの上に黒い入力欄が乗る（Safariでは文字が見えなくなることがある）。 */
  color-scheme: light;
  background: #ffffff;

  /* --- ブランド色 ---
     既存ロゴ（takachiho_america_logo.png）の実測値をそのまま使う。
     ロゴのブルー = #0070BD（ロゴ画像内で2,355px・最も広い有彩色）
     brand-light はロゴのアンチエイリアスに含まれる淡色 #E4F1F9 を採用。
     コントラスト比は実測で検証済み（白文字on brand = 5.18:1 / AA適合）。 */
  --color-brand:        #0070BD;
  --color-brand-dark:   #005A96;
  --color-brand-darker: #004A7C;
  --color-brand-light:  #E4F1F9;
  --color-accent:       #C8102E;   /* 赤。PDFバッジと必須マークにのみ使う */
  --color-focus:        #C8102E;   /* フォーカスリング。役割が違うので別名にしてある */

  /* --- 文字・背景 --- */
  --color-text:         #14191F;
  --color-text-muted:   #5A6570;
  --color-bg:           #ffffff;
  --color-bg-subtle:    #F4F8FB;   /* ブランドのブルー寄りに振った淡色 */
  /* 製品画像の背景。純白だと銀色・淡グレーの製品が沈むため、実測で
     最も明るい製品(243.7/255)から8以上離した値。
     tools/knockout_bg.py の FILL と必ず同値にすること。 */
  --color-product-bg:   #E4ECF3;
  --color-border:       #d8dee4;   /* 罫線など装飾用（白に対し1.36:1） */
  --color-border-strong:#7d8894;   /* 入力欄・ボタンの境界。WCAG 1.4.11 の3:1を満たす（3.61:1） */

  /* --- タイポグラフィ --- */
  --font-sans: "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm:   0.875rem;
  --font-size-lg:   1.125rem;
  --font-size-h1:   clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --font-size-h2:   clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --font-size-h3:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  /* トップのヒーロー見出し。h1 のまま出すと製品タイルを押し下げるので
     小さくしていたが、h2 と同寸になり「そのページで一番上の見出し」が
     判別できなくなっていた。h2 と h1 の中間に置く。 */
  --font-size-hero: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);
  --line-height:        1.75;
  --line-height-tight:  1.3;
  --line-height-table:  1.45;      /* 数値表は詰める */

  /* --- 余白 --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;

  /* --- レイアウト --- */
  --container-max: 1140px;
  --radius: 4px;
  --radius-sm: 2px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);

  /* --- ヘッダー --- */
  --header-height: 68px;
}

/* ブレークポイント（@media ではカスタムプロパティを使えないため記録のみ）
     600px  … グリッド2列
     900px  … グローバルナビを横並びへ
    1100px  … ドロップダウンをホバー表示へ（タブレットを除外するため） */