/* 人が主役の採用 / recruit-people — design tokens */
:root {
  --color-bg: #fbf7ef;
  --color-bg-alt: #f5efe0;
  --color-ink: #2c2a28;
  --color-ink-weak: #6b6560;

  --color-orange: #ee7a30;        /* 背景専用。文字には使わない（地の上で2.63:1 = NG） */
  --color-orange-hover: #e8752c;  /* 墨文字ホバー時 4.77:1 */
  --color-orange-text: #a84717;   /* 地の上で文字として使う場合はこちら（5.49:1） */

  --color-yellow: #f2c14e;        /* 背景専用（商品開発タグ） */
  --color-yellow-text: #8a6a15;   /* 地の上の文字用（4.73:1） */

  --color-green: #7fae5a;         /* 背景専用（生産タグ） */
  --color-green-text: #3f5f2a;    /* 地の上の文字用（6.82:1） */

  --color-blue: #5b9bd1;          /* 背景専用（営業タグ） */
  --color-blue-text: #1f4f74;     /* 地の上の文字用（8.09:1） */

  --color-line: #e4dcc9;

  /* 面に文字を載せる時は必ずこちらを使う（実測 WCAG AA 4.5:1 以上） */
  --on-orange: var(--color-ink);   /* 墨 on 橙 = 5.08:1 */
  --on-yellow: var(--color-ink);   /* 墨 on 黄 = 8.52:1 */
  --on-green:  var(--color-ink);   /* 墨 on 緑 = 5.52:1 */
  --on-blue:   var(--color-ink);   /* 墨 on 青 = 4.80:1（14px以上で使用） */
  --on-ink:    var(--color-bg);    /* 地 on 墨 = 13.38:1 */

  /* 変数には総称ファミリを含めない */
  --font-heading: "Zen Maru Gothic";
  --font-body: "Zen Maru Gothic";
  --font-latin: "Fredoka";

  --space-unit: 8px;
  --radius: 24px;
  --radius-pill: 999px;
  --radius-sm: 12px;
  --max-width: 1240px;
  --gutter: 20px;
}