/* ============================================================
   tokens.css — 全ページ共通のデザイントークン（唯一の定義元）
   作成 2026-09-03。全29ページで **一番最初に** 読み込む。
   ------------------------------------------------------------
   なぜ分けたか：
   トークンが site.css / top.css / cta.css / v4.css / v2.css の
   :root に散らばり、**61個のうち48個が重複定義**されていた。
   うち6個は値まで食い違っており、後勝ちで隠れた定義を見て
   仕様を書き、実測値と違う記述を2回出した（--max 1320px→実は
   1292px、--ink-3 #828AA0→実は #656C7D）。
   トークンはここだけに書く。他のCSSに :root を作らない。

   ▼ 意図的な上書き（これだけは各CSSに残してある。増やさない）
     top.css   --hh      ヘッダーが浮くピル型で高さが流体
     v4.css    --ink     トップだけ墨(#14181E)で組む
     v4.css    --ink-2   同上
     v4.css    --gut     トップだけ溝を広く取る
   上書きを足すときは、必ずここのコメントに1行追記する。

   ▼ 読み込み順（HTML側の <link> の順序がそのまま優先順位）
     下層17ページ : tokens → site → cta [→ v2]
     トップ系12P  : tokens → top  → cta [→ v4 → fv8]
   ============================================================ */

:root{
  /* 色：ブランドの核 */
  --principle:#5546A8;
  --violet-d:#3E3184;
  --violet-l:#6D5FC4;

  /* 色：地と文字 */
  --paper:#F6F5F0;
  --white:#FFFFFF;
  --ink:#18233B;
  --ink-2:#5A6379;
  --ink-3:#656C7D;

  /* 色：反転面・寒色 */
  --deep:#0E1730;
  --deepest:#080C14;
  --peri:#B7B9DC;
  --ice:#C9DCE8;

  /* 色：罫線 */
  --line:rgba(24,35,59,.16);
  --line-2:rgba(24,35,59,.08);
  --line-d:rgba(255,255,255,.16);
  --line-d2:rgba(255,255,255,.08);

  /* 色：意味づけ済みの役割名（section単位で使う） */
  --c-head:var(--ink);
  --c-body:var(--ink);
  --c-sub:var(--ink-2);
  --c-eyebrow:var(--principle);
  --c-line:var(--line);
  --c-line2:var(--line-2);
  --c-fill:rgba(24,35,59,.03);
  --c-fill2:rgba(85,70,168,.08);
  --c-mark:var(--principle);

  /* 書体 */
  --grot:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --min:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;

  /* 文字サイズ（--f1が最小・--f8が最大） */
  --f1:.75rem;
  --f2:.8125rem;
  --f3:.9375rem;
  --f4:1.0625rem;
  --f5:clamp(1.1875rem,1.5vw,1.375rem);
  --f6:clamp(1.5rem,2.6vw,2rem);
  --f7:clamp(2rem,4.4vw,3.25rem);
  --f8:clamp(2.75rem,7.5vw,5.75rem);

  /* 余白（8px基準。--sp/--sp-s/--gutだけ流体） */
  --sp:clamp(96px,11vw,168px);
  --sp-s:clamp(48px,6vw,80px);
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:40px;
  --s5:64px;

  /* レイアウト */
  --max:1292px;
  --gut:clamp(16px,4vw,56px);
  --hh:64px;
  --rowpad:clamp(12px,1.4vw,22px);

  /* イージング */
  --e:cubic-bezier(.16,1,.3,1);

  /* 未分類 */
  --col:1240px;
  --navy:#0E1730;
  --paper-2:rgba(246,245,240,.72);
  --principle-d:#3E3184;
  --principle-l:#6D5FC4;
  --rule:rgba(20,24,30,.18);
  --rule-2:rgba(20,24,30,.09);
  --rule-d:rgba(246,245,240,.24);
  --rule-d2:rgba(246,245,240,.12);
  --sumi:#14181E;
  --tint:rgba(24,35,59,.035);
  --v-gut:clamp(20px,5vw,24px);
  --w:1180px;
}