/* ============================================================================
   tokens.css — ヨミトキ名人 デザイントークン（P3-W1正本）
   出典: templates/brand_design_guideline.md ＋ 岡田承認済みモック
   （internal/mockups/2026-07-30_yomitoki_meijin/mock.html の <style> を移植）。
   グラデ135deg #007ECA→#74D8EC 固定 / Noto Sans JP + Outfit のみ /
   角丸0〜4px（ピル128pxはバッジのみ）/ ドロップシャドウ禁止 / オレンジは装飾のみ5%以下。

   🔴 このファイルはP3-W1（本ファイル群の作者）のみが変更する。
   W2〜W4（review.js/jobs.js/templates.js/members.js/report.js）は読むだけ。
   新しい変数が必要になったらPMOに相談すること（各自でここに変数を追加しない＝
   トークンの二重管理・値のブレを防ぐため）。
   コンポーネント単位のCSS（ボタン・チップ・モーダル等）は style.css を参照。
   ============================================================================ */

:root {
  /* ---- NOVEL ブランド（templates/brand_design_guideline.md） ---- */
  --nvl-blue: #007ECA;
  --nvl-cyan: #74D8EC;
  --nvl-navy: #004873;
  --nvl-gradient: linear-gradient(135deg, #007ECA, #74D8EC);

  /* ---- アクセント（オレンジは装飾のみ・1画面5%以下・警告色には使わない） ---- */
  --nvl-orange: #F97316;
  --nvl-orange-text: #C2410C;
  --nvl-tint-orange: rgba(249, 115, 22, .08);

  /* ---- ニュートラル ---- */
  --nvl-ink: #080808;
  --nvl-text: #333333;
  --nvl-border: #E3E3E3;
  --nvl-bg-light: #F2F2F2;
  --nvl-bg-dark: #121212;
  --nvl-white: #FFFFFF;
  --nvl-tint-blue: rgba(0, 126, 202, .05);

  /* ---- フォント ---- */
  --nvl-font-ja: 'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
  --nvl-font-en: 'Outfit', 'Noto Sans JP', sans-serif;

  /* ---- 業務UI用の派生（ニュートラルからの展開・モック踏襲） ---- */
  --line-soft: #EFEFEF;
  --muted: #767676;
  --ok: #0E7C5A;    --ok-bg: #EDF7F2;    --ok-line: #C6E2D6;
  --warn: #8A6A12;  --warn-bg: #FBF6E9;  --warn-line: #E7DCBE;
  --err: #B3261E;   --err-bg: #FCF1F0;   --err-line: #EFCFCC;
  --edit: #007ECA;  --edit-bg: rgba(0,126,202,.06); --edit-line: #B4DCF2;
}

/* ---- グローバルリセット ---- */
*{box-sizing:border-box;margin:0;padding:0}

/* 🔴 P12対策（PITFALLS）: JSで el.hidden=true を切り替えるUI（ロール別ナビ・バッジ等）を
   このプロダクトでは多用する。author CSSで display:flex 等を明示した要素にも
   hidden属性が必ず勝つよう、最初にこの1行を入れる。表示/非表示の検証は
   getComputedStyle(el).display で行うこと（DOM属性の有無だけで判定しない）。 */
[hidden]{display:none!important}

html,body{height:100%}
body{
  background:var(--nvl-white);
  color:var(--nvl-ink);
  font-family:var(--nvl-font-ja);
  font-size:13px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
  overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:none;cursor:pointer;font-weight:inherit}
a{color:var(--nvl-blue)}
::selection{background:rgba(0,126,202,.16)}
:focus-visible{outline:2px solid var(--nvl-blue);outline-offset:1px}

/* ---- アイコン（index.htmlのSVG symbol定義と対で使う） ---- */
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ic.s14{width:14px;height:14px}
.ic.s18{width:18px;height:18px}
.ic.s20{width:20px;height:20px}

/* ---- 汎用ユーティリティ ---- */
.en{font-family:var(--nvl-font-en);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.grad-text{background:var(--nvl-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--nvl-font-en);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.jalabel{font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}