/* =====================================================================
   tokens.css — olne web デザイントークン（正本・フェーズ1 2026-11-05）
   ---------------------------------------------------------------------
   値は assets/css/style.scss の :root（「澄む」トークン）を正として写した。
   新しい共通部品（assets/css/olne-ui.css の .ol-*）はこの --olne-* だけを使う。
   既存ページ本体の CSS（--paper 等）は当面そのまま。段階的にこちらへ寄せる。
   docs/redesign/06-tokens.css はこのファイルの写し（scripts/verify-chrome.mjs が一致を検査）。
   ===================================================================== */

:root {
  /* 色：面 */
  --olne-bg: #F7FAF9;                  /* ページの地（旧 --paper） */
  --olne-surface: #FFFFFF;             /* カード・前面 */
  --olne-paper: #ECF1EE;               /* 囲み背景・静かなパネル（旧 --wash） */
  --olne-mist: #EDF5F0;                /* 交互帯・hover の面（旧 --mist） */
  --olne-paper-line: rgba(44, 106, 79, .18); /* 囲みの枠線（旧 --line） */
  --olne-line: rgba(44, 106, 79, .18);       /* 一般の枠線・区切り */

  /* 色：文字 */
  --olne-ink: #1E2B26;                 /* 本文・見出し（白地 14:1） */
  --olne-ink-2: #54655D;               /* 補足文（白地 5.9:1） */
  --olne-muted: #6E746E;               /* 日付・著作権など（白地 4.6:1） */

  /* 色：アクセント（緑） */
  --olne-green: #3CCC82;               /* ブランド緑＝ロゴ専用。UI（ボタン・文字・面）には使わない（2026-11-06） */
  --olne-green-ink: #2C6A4F;           /* 白地の文字リンク・小見出し・罫・現在地の下線（6.1:1） */
  --olne-green-soft: #EDF4EF;          /* 緑の薄地（バッジ・現在地） */

  /* 色：主要ボタン（深い緑地＋白文字・2026-11-06） */
  --olne-btn-bg: var(--olne-green-ink); /* 塗り＝リンク色と同じ深緑 #2C6A4F（白文字 6.4:1） */
  --olne-btn-bg-hover: #245640;        /* ホバー＝一段濃い緑（白文字 8.5:1） */
  --olne-btn-fg: #FFFFFF;              /* 文字 */

  /* 色：構造アクセント（阪大ブルー・PD基礎知識ガイドの基本色） */
  --olne-handai: #364C97;
  --olne-handai-soft: #E8ECF5;

  /* 色：状態 */
  --olne-warn: #B45309;                /* 注意（必ず文字と併用） */
  --olne-focus: #1D4ED8;               /* フォーカスリング（緑と区別・白地 6.4:1） */

  /* 文字 */
  --olne-font-display: 'Noto Serif JP', serif;                               /* 見出し（明朝） */
  --olne-font-body: 'Noto Sans JP', system-ui, -apple-system, sans-serif;    /* 本文・UI（ゴシック） */

  --olne-fs-body: 1.125rem;            /* 18px（CLAUDE.md 基準） */
  --olne-fs-article: 1.125rem;         /* 18px（記事本文） */
  --olne-fs-small: 0.875rem;           /* 14px（ノート・補足） */
  --olne-fs-meta: 0.8125rem;           /* 13px（パンくず・日付） */
  --olne-fs-h1: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);   /* 28〜40px */
  --olne-fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);  /* 24〜28px */
  --olne-fs-h3: 1.0625rem;             /* 17px */
  --olne-lh-body: 1.85;
  --olne-lh-article: 1.9;
  --olne-lh-heading: 1.4;
  --olne-measure: 44rem;               /* 本文の最大幅（既存踏襲） */

  /* 余白（8の倍数） */
  --olne-space-1: 4px;
  --olne-space-2: 8px;
  --olne-space-3: 12px;
  --olne-space-4: 16px;
  --olne-space-5: 24px;
  --olne-space-6: 32px;
  --olne-space-7: 48px;
  --olne-space-8: 64px;
  --olne-space-9: 96px;

  /* 角丸（既存：押せるカード 8 ／ カード 18 ／ 大 28） */
  --olne-radius-sm: 8px;
  --olne-radius: 18px;
  --olne-radius-lg: 28px;
  --olne-radius-pill: 999px;

  /* タップ領域・レイアウト */
  --olne-tap-min: 48px;
  --olne-tap-comfy: 56px;
  --olne-header-h: 64px;
  --olne-header-h-mobile: 60px;
  --olne-container: 72rem;             /* 1152px（既存） */
  --olne-gutter: 20px;                 /* 既存 */
  --olne-gutter-mobile: 16px;

  /* 動き */
  --olne-fade: 240ms ease;
}

/* 視差効果を減らす設定のとき、動きを止める */
@media (prefers-reduced-motion: reduce) {
  :root { --olne-fade: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* フォーカスリング（全要素共通・消さない） */
:focus-visible {
  outline: 3px solid var(--olne-focus);
  outline-offset: 2px;
}