/* ==========================================================================
 * 共通トークン — サイト全体で1つの色・寸法の体系
 *
 * 2026-09-14 の実測: サイト全体で固有カラーが166色あり、同じ「主ボタン」が
 * ページごとに4種類の見た目（グラデーション／濃紺／橙塗り／無し）をしていた。
 * 求人一覧（/jobs/）で組んだ16色の体系を、ここに1本出しして全ページが参照する。
 *
 * 【使い方】
 * 各ページの CSS は生の16進を書かず、ここのトークンを参照する。
 * 166色は一度に消えないので、まずは文字色とボタンから順に寄せていく。
 *
 * 【色の出どころ】Quantum Plus 自身のデザインシステム
 * （quantum-plus-design-system/tailwind.config.js）の実値。
 * Quantum Orange #D55C25 = quantum.500 ／ #C2410E = quantum.600 ／
 * #FFF7ED = quantum.50 ／ neutral 50〜900 = #FAFAFA〜#1E293B。
 *
 * 【越えてはならない線】
 * #D55C25 は白地で 3.90:1 しかなく、文字に使うと WCAG AA を割る。
 * 塗り・データ可視化にだけ使い、文字にするときは --qp-accent-ink を使う。
 *
 * @package Quantum_Plus
 * @since   3.6.0
 * ========================================================================== */

:root {
  /* --- 地（段差は2段まで） --- */
  --qp-bg:            #FFFFFF;
  --qp-subtle:        #FAFAFA;   /* neutral-50 */
  --qp-hover:         #F5F5F5;   /* neutral-100 */
  --qp-border:        #E5E5E5;   /* neutral-200 */
  --qp-border-strong: #D4D4D4;   /* neutral-300 */

  /* --- 文字（白地に対する実測コントラスト） --- */
  --qp-ink-1: #1E293B;  /* 14.6:1  見出し・数値・主ボタンの地 */
  --qp-ink-2: #525252;  /*  7.8:1  本文 */
  --qp-ink-3: #737373;  /*  4.7:1  ラベル・補助。実文字の下限 */
  --qp-ink-4: #A3A3A3;  /*  2.5:1  罫・区切り・無効。情報を載せない */
  --qp-on-dark: #FFFFFF;

  /* --- アクセント（1色。識別・状態・データの3用途で1画面5箇所まで） --- */
  --qp-accent:      #D55C25;  /* 3.90:1  塗り・データのみ。文字に使わない */
  --qp-accent-ink:  #C2410E;  /* 5.18:1  アクセントを文字にするとき */
  --qp-accent-wash: #FFF7ED;

  /* --- 状態 --- */
  --qp-ok-wash: #ECFDF5;
  --qp-ok-ink:  #047857;  /* 5.48:1（success-600 #059669 は 3.76:1 で AA を割る） */

  /* --- 影（色ではなく rgba で沈める） --- */
  --qp-shadow-1: 0 1px 2px rgba(30, 41, 59, .05);
  --qp-shadow-2: 0 1px 2px rgba(30, 41, 59, .04), 0 8px 24px -10px rgba(30, 41, 59, .14);
  --qp-shadow-3: 0 1px 3px rgba(30, 41, 59, .05), 0 18px 44px -16px rgba(30, 41, 59, .20);

  /* --- 版面 --- */
  --qp-t-h1:   clamp(27px, 4.4vw, 46px);
  --qp-t-h2:   clamp(21px, 2.6vw, 30px);
  --qp-t-h3:   18px;
  --qp-t-body: 15px;
  --qp-t-sm:   13.5px;
  --qp-t-xs:   12px;

  --qp-s-1: 4px;   --qp-s-2: 8px;   --qp-s-3: 12px;
  --qp-s-4: 16px;  --qp-s-5: 20px;  --qp-s-6: 24px;
  --qp-s-8: 32px;  --qp-s-10: 40px; --qp-s-12: 56px;
  --qp-s-16: 80px;

  --qp-radius-card:    16px;
  --qp-radius-control: 10px;
  --qp-radius-pill:     6px;

  --qp-h-cta:   44px;
  --qp-h-input: 46px;
  --qp-maxw:    1160px;
  --qp-gutter:  24px;
}

/* --------------------------------------------------------------------------
 * 手動ダークモード（インタビュー・メディアの切替ボタン。端末設定には追従しない）
 *
 * ink スケールは「地に対してどれだけ沈むか」を表す。地が反転すれば
 * 沈む方向も反転するので、ダーク時は明度を裏返す。ここを用意しないと、
 * ライトで AA を満たすために濃くした文字が、そのままダーク地に載って
 * 読めなくなる。--qp-ink-1 は主ボタンの「塗り」でもあるため反転しない。
 * ----------------------------------------------------------------------- */
body.dark-mode {
  --qp-ink-2:      #CBD5E1;  /* #0F172A 地で 11.4:1 */
  --qp-ink-3:      #94A3B8;  /* #0F172A 地で  6.6:1 */
  --qp-ink-4:      #64748B;  /* 非テキストの境界・記号用 */
  --qp-accent-ink: #FDBA74;  /* #C2410E は濃紺地で 2.8:1 しか出ない */
}