/* ============================================================
   デザイントークン（課題46）
   全ページが読む（法務ページ・用語集・404 は page.css より前に読む）。
   色と書体は D3「鉄と錆止め」（設計書 tools/site-redesign-design.md §4・§4-1・§4-2。値の元は tools/site-redesign-tokens.css）。
   D3 の間は新しい値を :root.theme-iron に置き、切り替えたページだけに効かせていた。全ページを切り替えたので
   :root へまとめ、使われなくなった古いトークン（D2 の時点の --c-*・記事の --color-*・/archive/ の --arc-*）を外した（D3 PR 7a・2026-10-22）。
   各ページは ?v=20261022 を付けて読む（theme-iron を外した HTML が、ブラウザに残った古い tokens.css〈:root.theme-iron の形〉と組むと
   古い色に戻るため。GitHub Pages の max-age は 600 秒）。次に tokens.css の名前を変えるような直しをするときも、この印を進める
   トークンにない色を CSS や HTML に直に書かない（tools/validate_daily.py の check_colors() が WARN を出す・D3 PR 7b）
   ============================================================ */
:root {
  /* --- タイポグラフィ ---
     スマホでは @media (max-width:768px){html{font-size:18px}} により
     rem 基準が 16px→18px に底上げされる（変更禁止）。
     下記はその 16px/18px 双方に乗るスケール。 */
  --fs-2xs:  0.65rem;   /* 極小注記・バッジ内文字 */
  --fs-xs:   0.72rem;   /* 補助テキスト（現状の最頻値・62箇所） */
  --fs-sm:   0.78rem;   /* 小テキスト（現状 0.75rem 63箇所を含む帯） */
  --fs-base: 0.85rem;   /* 本文 */
  --fs-md:   0.95rem;   /* やや大きい本文・リード */
  --fs-lg:   1.1rem;    /* 小見出し */
  --fs-xl:   1.35rem;   /* 見出し */
  --fs-2xl:  1.6rem;    /* 大見出し */

  /* 行間: 日本語本文は 1.7〜1.8 が読みやすい。フェーズ2で本文へ適用する */
  --lh-tight: 1.4;
  --lh-body:  1.7;

  /* 読みやすい最大行長。フェーズ2で長文セクションへ適用する
     （現状はコンテナ max-width:1400px の1カラムで全角90字近くになっている） */
  --measure: 70ch;

  /* --- スペーシング（tools/design-system.md 準拠） --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* --- 色（§4）--- */
  --c-bg:        #111516;  /* 地 */
  --c-surface:   #272e30;  /* 面（帯・札の下地）。10/20 に #1b2021 から明るくした（D3 PR 2） */
  --c-text:      #e8e5dc;  /* 本文            14.6（面の上 11.0） */
  --c-text-mute: #9d9b90;  /* 補助の文字（日付・出典） 6.6（面の上 5.0） */
  --c-rule:      #3a3d3b;  /* 細い罫。太い罫（段の上の3px）は --c-text を使う */
  --c-accent:    #cf5c44;  /* 差し色（アイコン・小見出し） 4.6。面の上は 3.5 なので文字に使わない */
  --c-danger:    #c4372d;  /* 危険。面として使う。文字色にしない（地の上 3.4） */
  --c-alert:     #e07b24;  /* 警戒（橙） */
  --c-warn:      #e8b92e;  /* 注記（黄） */
  --c-ok:        #2f9e6e;  /* 平常 */
  --c-on-danger: #ffffff;  /* 危険の札の文字 5.3 */
  --c-on-alert:  #14110a;  /* 警戒の札の文字 6.3 */
  --c-on-warn:   #14110a;  /* 注記の札の文字 10.2 */
  --c-on-ok:     #14110a;  /* 平常の札の文字 5.6（白は 3.4 で不足） */
  --c-figure:    #9ec3cf;  /* 大きな数字（鋼）。10/20 決定（D3 PR 2）。地の上 9.8・面の上 7.3。状態の色と取り違えない冷たい色 */
  --c-on-accent: #14110a;  /* 差し色の面（ボタン）の上の文字 4.7 */
  /* 書体（§4-1）。本文は BIZ UDPゴシック、大きな数字と段の見出しの英字は IBM Plex Sans Condensed */
  --f-body:   'BIZ UDPGothic','Hiragino Sans','Yu Gothic UI',sans-serif;
  --f-figure: 'IBM Plex Sans Condensed','BIZ UDPGothic',sans-serif;
  /* 地図の背景（PR 6a・2026-10-21。案2「海図」・湾岸の9か国を少し暗く。運営者）。§4 の10色の外の、地図だけに使う色。
     比は地名の文字に対する値。地名には暗い縁取り（--map-halo）がある */
  --map-sea:           #1d3a50;  /* 海 */
  --map-land:          #4a483e;  /* 陸（暖かい灰色） */
  --map-land-hi:       #6e6750;  /* 湾岸の9か国（砂）。都市名 4.7・国名 5.2 */
  --map-coast:         #6a675a;  /* 海岸線・国境 */
  --map-coast-hi:      #bbb08e;  /* 湾岸の9か国と細かい海岸線の範囲の海岸線・国境 */
  --map-river:         #2f5b75;  /* 川・湖の縁 */
  --map-label:         #efebdf;  /* 都市名。陸の上 7.7 */
  --map-label-sea:     #a8c6d8;  /* 海・川の名前。海の上 6.6 */
  --map-label-country: #fff4d8;  /* 国名 */
  --map-label-own:     #f6cfa6;  /* データに無く自前で足した港 */
  --map-halo:          #1d2220;  /* 地名の縁取り */
  /* ルートの線（PR 6b・2026-10-21。運営者）。状態の4色（赤・橙・黄・緑）と取り違えない色だけで組む。
     湾岸の迂回（A・B）は青の2色、遠い産地からの代替は紫〜桃〜砂の4色、ホルムズを通るもの（D・旧ルート）は白と灰、運河は水色の実線 */
  --map-route-a:      #6cc6f0;  /* ルートA：フジャイラ（UAE） */
  --map-route-b:      #8f9dff;  /* ルートB：ヤンブー（サウジ） */
  --map-route-c:      #d690f0;  /* ルートC：アラスカ発 太平洋 */
  --map-route-c-sa:   #f09cc4;  /* ルートC（南米）：ブラジル発 */
  --map-route-ng:     #e3c39a;  /* ナイジェリア発 */
  --map-route-ao:     #bf9a78;  /* アンゴラ発 */
  --map-route-d:      #e8e5dc;  /* ルートD：通航料払いホルムズ通過 */
  --map-route-old:    #7f8582;  /* 旧ルート */
  --map-route-canal:  #7fe6f2;  /* スエズ・パナマ運河 */
  --map-route-casing: #0d171d;  /* 線の下の細い縁（線の太さ＋1px・不透明度 0.85） */

  /* --- ブレークポイント方針（CSSの @media では変数を使えないため覚書） ---
     フェーズ2 2-c（2026-09-18）で 480 / 600 / 640 / 768 / 860px の5種を、
     役割ごとに次の3つへ整理した。境界の値は「以下（max-width）」側に含める。
       600px  : スマホ縦の詰め（余白・小物）       … max-width:600px  / min-width:601px
       768px  : 文字サイズ（絶対ルールの html 18px） … max-width:768px  / min-width:769px
       1023px : 表・地図凡例の狭幅対応、PC との境 … max-width:1023px / min-width:1024px
     カラム数: 〜600px 1列 ／ 601〜1023px 2列 ／ 1024px〜 3列（末尾のフェーズ2ブロック）
     タブレット（iPad mini 縦 744px・iPad 縦 768〜834px）は 2列 になる。 */
}