/* ============================================================
   🎨 design-tokens.css - 全画面共通のデザイントークン
   ============================================================
   全画面共通のデザイントークン。新規CSSは必ずここのトークンを参照する。
   値の収束（複数ある緑を1つに等）は段階的に実施中 — 現状の重複値の目録は
   docs/reports/2026-07-03_0130_UIUX識者パネルレビュー.md 参照

   採用値の出典:
   - セマンティック色/スペーシング/角丸/影: static/portal/styles/portal.css の既存トークン
   - フォントサイズスケール: 既存頻出値（0.75rem/0.875rem/1rem/1.125rem/1.25rem系）
   - --font-family-base: static/common/styles/base.css のスタック＋日本語フォールバック追加
   - --modal-*: カードゲームのモーダル多数派（handLimitModal.css / peek-hand-modal.css /
     profession-help-modal.css 等のネイビー系 #1a1a2e→#16213e・radius16px・影 0 20px 60px）。
     各モーダルCSSは var(--modal-bg, フォールバック) 形式で参照するため、
     この値はフォールバック値と完全一致を維持すること。
   ============================================================ */

:root {
  /* ===== セマンティック色 (出典: portal.css) ===== */
  --color-primary: #667eea;
  --color-success: #2ecc71;
  --color-warning: #f39c12;
  --color-danger: #e74c3c;
  --color-info: #3498db;
  --color-primary-hover: #764ba2; /* ブランドグラデ終端 (portal.css --primary-hover と同値) */

  /* ===== セマンティック色の階調 (light/base/dark/deep) =====
     旧material系パレット(#4caf50/#ff9800/#f44336/#2196f3系)からの
     収束マップは docs/reports/ の色収束レポート(2026-07-04)参照 */
  --color-success-light: #58d68d;
  --color-success-dark: #27ae60;
  --color-success-deep: #1e8449;
  --color-warning-light: #f5b041;
  --color-warning-dark: #e67e22;
  --color-warning-deep: #ca6f1e;
  --color-danger-light: #ec7063;
  --color-danger-dark: #c0392b;
  --color-danger-deep: #922b21;
  --color-info-light: #5dade2;
  --color-info-dark: #2980b9;
  --color-info-deep: #21618c;

  /* ===== スペーシング (出典: portal.css) ===== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* ===== 角丸 (出典: portal.css --radius-* ＋ pill補完) ===== */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;

  /* ===== 影 (出典: portal.css --shadow-sm/md/lg) ===== */
  --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* ===== hoverリフト量 (規律統一・2026-07 portal監査 c-1)
     小コンポーネント=sm / カード=md / 大型カード=lg の3段階に標準化 ===== */
  --lift-sm: -2px;
  --lift-md: -4px;
  --lift-lg: -8px;

  /* ===== フォントサイズスケール (px直書き1789件の受け皿) ===== */
  --fs-2xs: 10px;      /* バッジ・補足ラベルの下限。これ未満の指定は禁止 */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */

  /* ===== フォント (base.cssスタック＋日本語フォールバック) ===== */
  --font-family-base: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", sans-serif;

  /* ===== モーダル共通コンポーネントトークン =====
     ⚠️ 各モーダルCSSが var(--modal-*, フォールバック) で参照済み。
     値を変える場合はフォールバック側も揃えて更新すること */
  --modal-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --modal-border: 2px solid rgba(255, 255, 255, 0.1);
  --modal-radius: 16px;
  --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --modal-header-color: #fff;

  /* ===== 占術テーマ層（yogenkyoランディング / wiki世界観）=====
     2026-07-04 ステップ②完了: #d4a574に統一（yogenkyoが原本・wikiの
     #d8b878はそれを再現する過程で生じたズレだったため、正典側の値へ収束）。
     wiki.css / yogenkyo/index.html 双方の :root が var(--theme-*, フォールバック)
     で接続済み（フォールバック値は本ファイルの値と完全一致を維持すること）。
     将来ポータルへ占術要素を持ち込む際（橋渡し案）もこの層が供給源になる。 */
  --theme-void: #07070f;        /* 最深部の黒 */
  --theme-night: #0a0a14;       /* 夜空の地色 (wiki --bg) */
  --theme-night-2: #0f0f1e;     /* 補助背景 (wiki --bg-2) */
  --theme-gold: #d4a574;        /* ブランド金 */
  --theme-gold-bright: #ecc196; /* 金・明 */
  --theme-purple: #a855f7;      /* 紫 */
  --theme-indigo: #6366f1;      /* 藍 */
  --theme-ink: #e9e6dd;         /* 本文文字（羊皮紙寄り暖色） */
  --theme-ink-head: #f6f4ee;    /* 見出し文字 */
}