/* 共有トークン — tokens.css
   ブランド色・フォントは各 HTML の @theme（TW ユーティリティ用）と同値に保つこと。
   CSS からは var(--color-*) / var(--font-*) / var(--ink-a*) を参照する（hex 直書きしない）。

   デザイン確定前で main.css / recruit.css が空のため、現在は参照ゼロのトークンがある。
   ページ実装と同時に参照が付く前提で残しているので、未使用として消さないこと。

   TODO: 下記の色とフォントはブランド未確定のための暫定値。
         正式なブランドカラー / フォントが決まったら、この :root と
         各 HTML の @theme を同時に差し替える。 */

:root {
  /* brand — sync with @theme in recruit/index.html / 404.html */
  --color-ink: #14181c;
  --color-paper: #f7f6f3;
  --color-surface: #ffffff;
  --color-grey: #5f6670;
  --color-accent: #2f6f4e;
  --color-danger: #b3261e;

  /* ink alpha — 罫線・影用。color-mix from --color-ink */
  --ink-a08: color-mix(in srgb, var(--color-ink) 8%, transparent);
  --ink-a16: color-mix(in srgb, var(--color-ink) 16%, transparent);

  /* fonts */
  --font-sans: "M PLUS 1", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-display: "M PLUS 1", var(--font-sans);
}