/* =============================================================================
   tokens.css — VACAN Technologies 採用ページ
   -----------------------------------------------------------------------------
   proposal-studio/tokens.css を複製し、採用ページに必要な2点を補完したもの。
   補完内容（元ファイルに未定義だったもの）:
     - --sp-*      : 8pxグリッド（DESIGN_RULES.md §0-9 に準拠）
     - --container : コンテナ幅（DESIGN_PLAYBOOK.md §1 に準拠）
   色・書体・角丸・影・モーションは一切変更していない。
   ============================================================================= */

:root{
  /* ---- 書体 ---- */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Yu Gothic UI","Noto Sans JP",sans-serif;
  --font-display:var(--font);
  --mono:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  /* ※斜体セリフは使わない（アクセントは色のみ） */

  /* ---- 面 / 背景 ---- */
  --bg:#FAFAFC; --surface:#FFFFFF; --surface-2:#F6F5F9; --surface-3:#F0EEF5;
  /* ---- 罫線 ---- */
  --border:#EBE9F1; --border-2:#DED9E8; --hair:#F0EEF4;
  /* ---- テキスト ---- */
  --text:#191320; --text-2:#67617A; --text-3:#6F6783;
  /* ---- brand = 署名紫（アンカー：ナビ・主要CTA・重要見出し・ロゴ） ---- */
  --brand:#512376; --brand-2:#7C4DBD; --brand-ink:#3C1A5C; --brand-tint:#F3EFFB; --brand-tint-2:#E9E1F7;
  /* ---- accent = 成果 teal（成果データ・良値ラベル・リンクのみ／画面の5〜10%未満） ---- */
  --accent:#00A896; --accent-ink:#00776A; --accent-tint:#E1F6F2; --accent-2:#00C9B1;
  /* ---- 状態色 ---- */
  --warn:#B9791F; --warn-ink:#8A5A12; --warn-tint:#FBF1E1;
  --danger:#B3261E; --danger-tint:#FBEAE8;
  /* ---- 塗り上の文字 ---- */
  --on-brand:#FFFFFF; --on-accent:#FFFFFF;

  /* ---- 角丸（ナビ/CTA/チップ=pill、カード=小、円=50%） ---- */
  --r-card:6px; --r:9px; --r-lg:12px; --r-pill:9999px;
  --r-sm:9px; --r-xs:7px;
  /* ---- 影（濃紺ティントの大ぼかし・低不透明） ---- */
  --shadow-soft:0 30px 44px -24px rgba(30,16,51,.12),0 8px 24px -14px rgba(30,16,51,.08);
  --shadow-nav:0 24px 40px -20px rgba(39,35,67,.10);
  --shadow-sm:0 1px 2px rgba(30,16,51,.06),0 1px 3px rgba(30,16,51,.04);
  --shadow-md:var(--shadow-soft);
  /* ---- モーション ---- */
  --dur-fast:150ms; --dur:220ms; --ease:cubic-bezier(.2,.6,.2,1);

  /* ---- state layer（M3） ---- */
  --state-hover:.08; --state-focus:.10; --state-pressed:.10; --state-disabled:.38;

  /* ---- ロゴ色（背景で切替：明るい背景=紫、濃背景=白） ---- */
  --logo-color:var(--brand);

  /* ===== 以下は採用ページのための補完（元 tokens.css に未定義） ===== */

  /* ---- 余白：8px グリッド ---- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:40px; --sp-6:48px; --sp-8:64px; --sp-10:80px; --sp-12:96px; --sp-16:128px;

  /* ---- コンテナ幅 ---- */
  --container:1200px;        /* サイト標準 */
  --container-prose:1080px;  /* 本文主体 */
  --container-wide:1300px;   /* ナビ・比較表 */

  /* ---- タップターゲット（WCAG 2.5.5 AAA。公開サイトのため44px） ---- */
  --tap:44px;
}

/* ===== DARK THEME ===== */
:root[data-theme=dark]{
  --bg:#0B0910; --surface:#141019; --surface-2:#1B1524; --surface-3:#221A2E;
  --border:#2A2233; --border-2:#382C48; --hair:#221B2C;
  --text:#ECE7F4; --text-2:#A79FB8; --text-3:#8A839A;
  --brand:#B79CFF; --brand-2:#A784F5; --brand-ink:#C9B6FF; --brand-tint:rgba(124,77,189,.18); --brand-tint-2:rgba(124,77,189,.28);
  --accent:#2FE0C4; --accent-ink:#5FEAD3; --accent-tint:rgba(0,168,150,.16); --accent-2:#2FE0C4;
  --warn:#E0A85A; --warn-ink:#E0A85A; --warn-tint:rgba(185,121,31,.16);
  --danger:#FF8A80; --danger-tint:rgba(179,38,30,.18);
  --on-brand:#160E2A; --on-accent:#052823;
  --shadow-soft:0 30px 48px -24px rgba(0,0,0,.6),0 8px 24px -14px rgba(0,0,0,.5);
  --shadow-nav:0 24px 40px -20px rgba(0,0,0,.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --logo-color:#FFFFFF;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --bg:#0B0910; --surface:#141019; --surface-2:#1B1524; --surface-3:#221A2E;
    --border:#2A2233; --border-2:#382C48; --hair:#221B2C;
    --text:#ECE7F4; --text-2:#A79FB8; --text-3:#8A839A;
    --brand:#B79CFF; --brand-2:#A784F5; --brand-ink:#C9B6FF; --brand-tint:rgba(124,77,189,.18); --brand-tint-2:rgba(124,77,189,.28);
    --accent:#2FE0C4; --accent-ink:#5FEAD3; --accent-tint:rgba(0,168,150,.16); --accent-2:#2FE0C4;
    --warn:#E0A85A; --warn-ink:#E0A85A; --warn-tint:rgba(185,121,31,.16);
    --danger:#FF8A80; --danger-tint:rgba(179,38,30,.18);
    --on-brand:#160E2A; --on-accent:#052823;
    --shadow-soft:0 30px 48px -24px rgba(0,0,0,.6),0 8px 24px -14px rgba(0,0,0,.5);
    --shadow-nav:0 24px 40px -20px rgba(0,0,0,.55);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --logo-color:#FFFFFF;
  }
}

/* ===== 印刷 — 紙は白に強制／ロゴは紫 ===== */
@media print{
  :root,:root[data-theme=dark]{
    --bg:#fff; --surface:#fff; --surface-2:#f6f6f6; --surface-3:#f0f0f0;
    --border:#ddd; --border-2:#ccc; --hair:#eee;
    --text:#191320; --text-2:#555; --text-3:#666;
    --brand:#512376; --accent:#00A896; --accent-ink:#00776A; --accent-tint:#E1F6F2;
    --warn:#B9791F; --danger:#B3261E;
    --on-brand:#fff; --on-accent:#fff;
    --shadow-soft:none; --shadow-nav:none; --shadow-sm:none;
    --logo-color:#512376;
  }
}