/* =======================================
   tokens.css  ─ デザイントークン集
   役割：色・余白・サイズ・タイポ等の変数のみを定義
   読み込み順：一番最初（他CSSの前）
   ======================================= */

/* === Base tokens (デフォルトはダーク基調) === */
:root {
  /* Colors */
  --bg: #0b0c10;
  /* ページ背景 */
  --bg-soft: #111319;
  /* セクション/下地 */
  --panel: #151922;
  /* カード/ウィジェット */
  --ink: #e6ebf5;
  /* 文字色(主) */
  --ink-dim: #b6c0d4;
  /* 文字色(従) */
  --muted: #8a94a6;
  /* さらに薄い文字色(従) */
  --line: #232833;
  /* 罫線 */
  --brand: #f93800;
  /* ブランド1 (スト6のビビッドオレンジ/レッド系) */
  --brand-2: #ffb020;
  /* ブランド2 (イエロー/ゴールド系) */
  --accent: #00d2ff;
  /* アクセント (サイバーなシアン・ブルー) */
  --accent-2: #3a7bd5;
  --success: #2bc48a;
  --warn: #ffb020;
  --danger: #ff5d5d;
  --link: #0055ff;

  /* Layout */
  --wrap: 1100px;
  /* 共通コンテナ幅 */
  --wrap-wide: 1320px;
  /* 記事のPCワイド幅 */
  --aside-w: 300px;
  /* サイドバー幅(PC) */
  --toc-w: 220px;
  /* 使う場合のみ */

  /* Spacing */
  --gap-w: 24px;
  /* カラム間 */
  --gap-w-md: 22px;
  /* 中間幅 */
  --radius: 14px;
  /* 角丸の標準 */
  --radius-sm: 10px;

  /* Header */
  --header-h: 74px;
  /* ヘッダー高 */
  --header-bg: rgba(11, 12, 16, .70);
  /* ダーク時のヘッダー背景 */

  /* Effects */
  --shadow: 0 6px 24px rgba(12, 20, 33, .12);
  --shadow-1: 0 6px 24px rgba(12, 20, 33, .12);
  --shadow-0: 0 0 0 rgba(0, 0, 0, 0);

  /* Typography */
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans JP";
  --leading: 1.8;
  --ls: .02em;

  /* Motion */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur-1: .18s;

  color-scheme: dark;
  /* UAに配色ヒント */
}

/* === OSライト配色に追従（自動切替）=== */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-soft: #f7f8fb;
    --panel: #ffffff;
    --ink: #111319;
    --ink-dim: #344159;
    --line: #e9edf5;
    --header-bg: rgba(255, 255, 255, .85);
    color-scheme: light;
  }
}

/* === 手動ライト強制（body に .theme-light で明示） ===
   body. セレクタにすることで、@media prefers-color-scheme のルールより
   詳細度を高め、スマホのOSがダークモードでも正しく上書きされます。 */
body.theme-light,
body.theme-light:root,
:root:has(body.theme-light) {
  --bg: #ffffff;
  --bg-soft: #f7f8fb;
  --panel: #ffffff;
  --ink: #111319;
  --ink-dim: #344159;
  --line: #e9edf5;
  --header-bg: rgba(255, 255, 255, .85);
  color-scheme: light;
}

/* bodyに .theme-light が付いている場合のCSS変数は :root でなく body 自身にも適用 */
body.theme-light {
  background-color: var(--bg);
  color: var(--ink);
}

/* === 手動ダーク強制（body に .theme-dark で明示）=== */
body.theme-dark {
  --bg: #0b0c10;
  --bg-soft: #111319;
  --panel: #151922;
  --ink: #e6ebf5;
  --ink-dim: #b6c0d4;
  --line: #232833;
  --header-bg: rgba(11, 12, 16, .70);
  color-scheme: dark;
}

/* === 便利トークン（ブレークポイント）=== */
@media (min-width: 1025px) {
  :root {
    --bp: "md";
  }
}

@media (min-width: 1200px) {
  :root {
    --bp: "lg";
  }
}