/* ============================================================
 * tokens.css — v2デザイントークン（ライト/ダーク）
 * Kaggle書籍 / BERT書籍 / ルートランディングで共用
 * ============================================================ */

:root {
  /* 背景・カード */
  --bg: #f6f4ee;
  --bg-card: #ffffff;
  --bg-elev: #faf8f3;

  /* 文字色階層 */
  --ink: #14161a;
  --ink-mute: #5a5e68;
  --ink-faint: #8a8e98;

  /* 罫線 */
  --line: #e6e2d6;
  --line-strong: #d4cfbe;

  /* アクセント（主要ボタン / Tabular） */
  --accent: #2a4fbf;
  --accent-soft: #e6ecf9;

  /* 鉄道PJアクセント */
  --rail: #d4583a;
  --rail-soft: #f8e7e0;

  /* 状態色 */
  --ok: #1f7a4a;
  --ok-soft: #d9eee3;
  --warn: #b8860a;
  --warn-soft: #f6efd9;
  --err: #c0392b;
  --err-soft: #f9e4e0;

  /* ドメイン色（学習マップ） */
  --domain-tabular: #2a4fbf;
  --domain-nlp: #8b5cf6;
  --domain-stats: #1f7a4a;

  /* マスト/参考バッジ */
  --mast: #14161a;
  --ref: #8a8e98;

  /* 形状 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* 影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  --bg: #0e1116;
  --bg-card: #161a22;
  --bg-elev: #1c2129;

  --ink: #ececec;
  --ink-mute: #a4a8b3;
  --ink-faint: #6a6e78;

  --line: #2a2f38;
  --line-strong: #3a414c;

  --accent: #8aa9ff;
  --accent-soft: #1a2340;

  --rail: #ff8a66;
  --rail-soft: #3a1f15;

  --ok: #5fc38a;
  --ok-soft: #163025;
  --warn: #e0b86b;
  --warn-soft: #2a2517;
  --err: #ff7b6c;
  --err-soft: #3a1614;

  --domain-tabular: #8aa9ff;
  --domain-nlp: #b794f4;
  --domain-stats: #5fc38a;

  --mast: #ececec;
  --ref: #8a8e98;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ============================================================
 * ベース要素スタイル
 * ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'palt';
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
}
::selection { background: var(--accent); color: #fff; }

.mono { font-family: 'JetBrains Mono', monospace; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
 * ユーティリティ
 * ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-mute);
}
.chip-must { background: var(--mast); color: var(--bg-card); border-color: var(--mast); }
.chip-ref { background: var(--bg-elev); color: var(--ref); }

.btn {
  border: 1px solid var(--line); background: var(--bg-elev);
  color: var(--ink); padding: 8px 14px; border-radius: var(--radius-md);
  font-size: 13px; transition: all 0.15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { opacity: 0.9; color: #fff; }