/* ═══════════════════════════════════════════════════════════
   納赫允魔導書 V28 · Design Tokens
   ═══════════════════════════════════════════════════════════
   所有色彩 / 字級 / 間距 / 圓角集中在這
   照信甫指定的「黑金神秘學 + 紫光 + 控制台」風格
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── 色彩系統 ─── */
  --bg-deep: #050506;        /* 最底層 */
  --bg-base: #08070A;        /* 主背景 */
  --bg-card: #0E0D10;        /* 卡片 */
  --bg-elevated: #14131A;    /* 浮起層（drawer / modal） */
  --bg-hover: #1A1820;
  --bg-input: #0A0911;

  --gold: #C9A35A;           /* 主金色 — 標題 / 重要邊框 / 主流程 */
  --gold-soft: #E8C879;
  --gold-dim: rgba(196, 154, 83, 0.45);
  --gold-line: rgba(196, 154, 83, 0.25);
  --gold-bg: rgba(196, 154, 83, 0.08);

  --purple: #8B5CF6;         /* 魔法 / AI / Prompt / 互動狀態 */
  --purple-soft: #A78BFA;
  --purple-dim: rgba(139, 92, 246, 0.4);
  --purple-line: rgba(139, 92, 246, 0.2);
  --purple-bg: rgba(139, 92, 246, 0.08);

  --cyan: #22D3EE;           /* 提示 / 搜尋 / 目前啟用 */
  --cyan-dim: rgba(34, 211, 238, 0.4);
  --cyan-line: rgba(34, 211, 238, 0.2);
  --cyan-bg: rgba(34, 211, 238, 0.08);

  --red: #EF4444;            /* 錯誤 / 警告 / 危險 */
  --red-dim: rgba(239, 68, 68, 0.4);
  --red-bg: rgba(239, 68, 68, 0.08);

  --green: #10B981;          /* 成功 / 已完成 */
  --amber: #F59E0B;          /* 注意 / 進行中 */

  /* ─── 文字色 ─── */
  --text-strong: #F4EFE0;    /* 標題 */
  --text-main: #E5E0D4;      /* 正文 */
  --text-muted: #9CA3AF;     /* 次文字 */
  --text-faint: #6B7280;     /* 弱文字 */
  --text-disabled: #4B5563;

  /* ─── 邊框 ─── */
  --border: rgba(196, 154, 83, 0.18);
  --border-soft: rgba(63, 63, 70, 0.5);
  --border-strong: rgba(196, 154, 83, 0.35);

  /* ─── 字級 ─── */
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-body: 14px;
  --fs-caption: 12px;
  --fs-tiny: 11px;

  --fw-regular: 400;
  --fw-bold: 600;
  --fw-black: 900;

  /* ─── 行高 ─── */
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-loose: 1.75;

  /* ─── 字距 ─── */
  --ls-wide: 0.15em;
  --ls-extra: 0.3em;

  /* ─── 間距（4px 基準） ─── */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-12: 48px;

  /* ─── 圓角 ─── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ─── 陰影 ─── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow-gold: 0 0 24px rgba(196, 154, 83, 0.25);
  --shadow-glow-purple: 0 0 24px rgba(139, 92, 246, 0.3);
  --shadow-glow-cyan: 0 0 24px rgba(34, 211, 238, 0.3);

  /* ─── AppShell 尺寸 ─── */
  --topbar-h: 56px;
  --leftrail-w: 264px;
  --leftrail-w-collapsed: 64px;
  --rightinspector-w: 340px;
  --bottomdock-h: 120px;

  /* ─── 動畫 ─── */
  --t-fast: 150ms;
  --t-normal: 220ms;
  --t-slow: 360ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── z-index 層級 ─── */
  --z-base: 1;
  --z-sticky: 50;
  --z-topbar: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-overlay: 500;
}