/* ══════════════════════════════════════════════════════════
   tokens.css ─ VEXUM 共通デザイントークン
   ----------------------------------------------------------
   全面改修「段階A（土台づくり）」で新設。
   このファイルは :root のカスタムプロパティ定義のみを持ち、
   要素セレクタ・クラスセレクタを一切含みません。
   したがって読み込んでも既存ページの表示は変わりません。

   仕様書 : docs/design-system.html
   色の根拠: image/logo_color.png を実測した3色
             #004EA2（濃紺・支配色）／#00A1E8（水色）／#6E7276（グレー）

   使用ルール（最重要）
     素の名前        … 白背景の文字・リンクに使える（AA 達成済み）
     -light 付き     … 面の塗り・バッジ・グラデ・ダーク地の文字専用
                       白背景の文字色には使わない
   ══════════════════════════════════════════════════════════ */
:root{
  /* ── 色：ブランド（法人導線）＝ 公式ロゴ由来 ──────────── */
  --c-brand:        #004EA2;  /* ロゴ濃紺。文字・リンク・ボタン地。白地 8.0:1 */
  --c-brand-deep:   #003B7A;  /* ホバー・押下。白地 11.0:1 */
  --c-brand-light:  #00A1E8;  /* ロゴ水色。白地 2.9:1 なので文字には使わない。ダーク地 6.6:1 */
  --c-brand-pale:   #EAF4FD;  /* 面の塗り・タグ地 */
  --c-brand-line:   #C2DCF2;  /* 枠線・区切り */
  --c-brand-grad:   linear-gradient(135deg,#004EA2 0%,#00A1E8 100%);
  --c-logo-gray:    #6E7276;  /* ワードマークのグレー。白地 4.9:1 */

  /* ── 色：採用導線 ──────────────────────────────────────
     明るいオレンジは「面」、濃いオレンジは「文字」。役割を混ぜない。 */
  --c-career:       #BF4D00;  /* 白地の文字・リンク・枠線。白地 4.9:1 ／ bg-2 4.6:1 */
  --c-career-deep:  #8F3900;  /* ホバー。pale 地の上の文字。白地 7.6:1 */
  --c-career-light: #FF8A3D;  /* 明るいオレンジ。ボタン地・バッジ・ダーク地の文字 */
  --c-career-pale:  #FFF1E6;  /* 面の塗り・タグ地 */
  --c-career-line:  #FFD2AE;  /* 枠線・区切り */
  --c-career-on:    #1A1208;  /* career-light を地にしたときの文字色。7.9:1 */

  /* ── 色：無彩 ─────────────────────────────────────── */
  --c-ink:          #10151A;  /* 見出し・本文。白地 18.4:1 */
  --c-ink-2:        #3C464F;  /* 副文・リード。9.6:1 */
  --c-ink-3:        #5A6570;  /* 補足・日付。5.9:1 */
  --c-ink-4:        #8A939C;  /* プレースホルダ。3.1:1 なので本文には使わない */
  --c-line:         #E2E6EA;
  --c-line-strong:  #C8CFD5;
  --c-bg:           #FFFFFF;
  --c-bg-2:         #F6F8F9;
  --c-bg-3:         #EDF1F3;
  --c-dark:         #081019;  /* フッター・ヒーロー・CTA。白文字 19.1:1 */
  --c-dark-2:       #121C28;

  /* ── 色：状態 ─ 白地 5.1 / 5.3 / 5.5:1 ───────────────── */
  --c-ok:   #1E7E52;
  --c-warn: #96600A;
  --c-err:  #C0372B;

  /* ── 書体 ─────────────────────────────────────────── */
  --f-en:'Montserrat',system-ui,sans-serif;
  --f-ja:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;

  /* ── 文字サイズ ─ 最小 13px。現行フッターの 9.6px は廃止 ── */
  --t-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);   /* 36 → 56 */
  --t-h1:      clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);  /* 28 → 44 */
  --t-h2:      clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); /* 24 → 34 */
  --t-h3:      clamp(1.1875rem, 1.05rem + .55vw, 1.5rem);/* 19 → 24 */
  --t-h4:      1.0625rem;  /* 17 */
  --t-lead:    1.0625rem;  /* 17 */
  --t-body:    1rem;       /* 16 */
  --t-sm:      .875rem;    /* 14 */
  --t-xs:      .8125rem;   /* 13 ＝ 最小 */
  --t-label:   .75rem;     /* 12。英字ラベル専用（大文字＋字間） */

  --lh-tight:1.3;
  --lh-head:1.45;
  --lh-body:1.8;
  --ls-label:.18em;
  --ls-head:.01em;

  /* ── 余白（4px グリッド） ─────────────────────────── */
  --s-1:4px;  --s-2:8px;   --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px;  --s-8:64px; --s-9:96px; --s-10:128px;
  --sec-y: clamp(56px, 4vw + 32px, 112px);  /* セクション上下 */
  --gut:   clamp(20px, 4vw, 64px);          /* 左右ガター */
  --wrap:  1200px;
  --wrap-narrow: 760px;                     /* 本文中心のページ */

  /* ── 角丸・線・影 ─────────────────────────────────── */
  --r-1:4px; --r-2:8px; --r-3:16px; --r-pill:999px;
  --bw:1px;
  --sh-1:0 1px 2px rgba(16,21,26,.06);
  --sh-2:0 4px 16px rgba(16,21,26,.08);
  --sh-3:0 12px 32px rgba(16,21,26,.12);

  /* ── 動き ─────────────────────────────────────────── */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.24s;
}