/* ============================================================
   Lethonaut — Theme variables
   ダークモード(デフォルト) + ライトモードの完全定義
   ============================================================ */

/* ====== ダークモード(デフォルト) ====== */
:root {
  /* 背景・サーフェス */
  --bg-base: #1a1816;
  --bg-surface: #252220;
  --bg-surface-2: #2f2c29;
  --border: #3a3633;
  --border-strong: #4a4540;

  /* 前景(テキスト) */
  --fg-base: #ebe5e0;
  --fg-muted: #a39c96;
  --fg-subtle: #6e6862;

  /* アクセント(ダスティピンク) */
  --accent: #edb4b4;
  --accent-hover: #f3c4c4;
  --accent-active: #e0a3a3;
  --accent-fg: #1a1816;

  /* セマンティック */
  --success: #a8c89a;
  --warning: #e8c896;
  --error: #d49595;
  --info: #9eb5c4;

  /* インタラクション */
  --hover-overlay: rgba(235, 229, 224, 0.04);
  --active-overlay: rgba(235, 229, 224, 0.08);
  --focus-ring: rgba(237, 180, 180, 0.4);

  /* フォントスタック */
  --font-sans: "Inter", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Zen Kaku Gothic Antique", "Inter", "Noto Sans JP", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* フォントサイズ(8段階+display) */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-display: 48px;

  /* 行間 */
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* 文字間隔 */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* スペーシングスケール */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* 角丸 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* トランジション */
  --transition-fast: 120ms ease;
  --transition-base: 160ms ease;
  --transition-slow: 200ms ease;

  /* レイアウト寸法 */
  --sidebar-width: 240px;
  --bottom-tab-height: 56px;
  --content-max: 1280px;
  --content-narrow-max: 900px;

  /* 星図(Phase 2c、モック v3 で確定した具体値)
     ダーク/ライト共通で夜空基調(手帳の「開いた星図ページだけが夜」演出)。
     ライトでも同値を再宣言(下記 [data-theme="light"] ブロック参照)。 */
  --star: #f2e0a8;
  --star-glow: rgba(242, 224, 168, 0.28);
  --polaris: #ffe985;
  --polaris-glow: rgba(255, 233, 133, 0.32);
  --star-line: rgba(163, 156, 150, 0.42);
  --star-line-complete: rgba(242, 224, 168, 0.55);
  --sky: #16130f;
  --sky-guide: rgba(163, 156, 150, 0.10);
  --sky-boundary: rgba(163, 156, 150, 0.35);
  --constellation-label: rgba(235, 229, 224, 0.62);
  --constellation-label-complete: rgba(255, 233, 133, 0.90);
  --star-name-label: rgba(235, 229, 224, 0.75);
  --field-label: rgba(163, 156, 150, 0.75);
}

/* ====== ライトモード ====== */
[data-theme="light"] {
  --bg-base: #faf7f4;
  --bg-surface: #ffffff;
  --bg-surface-2: #f3efea;
  --border: #e8e2dc;
  --border-strong: #d4ccc4;

  --fg-base: #2a2522;
  --fg-muted: #7a716a;
  --fg-subtle: #a8a09a;

  --accent: #d99595;
  --accent-hover: #c98585;
  --accent-active: #b97575;
  /* ライトのアクセント(ローズ)上では白文字だと約2.4:1 で読みにくい(WCAG AA 未満)。
     濃文字に変更し約6.2:1 を確保(ダークテーマと同じ「濃文字×ピンク」)。全 primary 共通。 */
  --accent-fg: #2a2522;

  --success: #7da369;
  --warning: #c69556;
  --error: #b96565;
  --info: #6f8a9e;

  --hover-overlay: rgba(42, 37, 34, 0.04);
  --active-overlay: rgba(42, 37, 34, 0.08);
  --focus-ring: rgba(217, 149, 149, 0.4);

  /* 星図: ライトモードでも「開いた星図ページだけが夜」の演出のため、
     星図系変数はダーク基調の値を上書きする(モック v3 の判断、§5.6 追補)。
     --sky はセピア紙とのコントラストが強すぎたため、
     暗い茶灰系(#3a3330)まで持ち上げて境界を柔らかくする。 */
  --star: #f2e0a8;
  --star-glow: rgba(242, 224, 168, 0.28);
  --polaris: #ffe985;
  --polaris-glow: rgba(255, 233, 133, 0.32);
  --star-line: rgba(163, 156, 150, 0.55);
  --star-line-complete: rgba(242, 224, 168, 0.65);
  --sky: #3a3330;
  --sky-guide: rgba(163, 156, 150, 0.14);
  --sky-boundary: rgba(122, 113, 106, 0.55);
  --constellation-label: rgba(235, 229, 224, 0.72);
  --constellation-label-complete: rgba(255, 233, 133, 0.90);
  --star-name-label: rgba(235, 229, 224, 0.82);
  --field-label: rgba(220, 210, 200, 0.75);
}