/* ============================================================
   Design Tokens — Jay's Second Brain (Freeverse)

   与 common/static/css/tokens.css 保持同步
   视觉方向：低饱和、偏暖的浅灰绿 / 淡米绿色背景
   深色模式：深空蓝黑 + 行星色彩（通过 body.dark 切换）
   ============================================================ */

:root {
  /* Background layers — 暖绿基调 (Freeverse: soft light green surface) */
  --bg: #f1f4ec;
  --bg2: #eef0ea;
  --s1: #faf9f3;
  --s2: #eef0ea;
  --s3: #e2e6db;

  /* Borders — 微绿灰 */
  --border: #d9ddd2;
  --border-2: #c8ccc0;
  --border2: #c8ccc0;

  /* Text — 高对比度深绿灰 */
  --text: #262b22;
  --muted: #565d50;
  --muted2: #787f72;

  /* Accent — Freeverse mint/teal 主强调色 */
  --accent: #1f9e8e;
  --accent-dim: rgba(31, 158, 142, 0.08);
  --accent-hover: #188577;
  --accent-glow: rgba(31, 158, 142, 0.14);

  /* Freeverse brand tokens */
  --fv-gold: #c89a3a;
  --fv-gold-text: #785719;
  --fv-gold-dim: rgba(200, 154, 58, 0.10);
  --fv-gold-soft: #e8d4a0;
  --fv-indigo: #242046;
  --fv-indigo-soft: #3a3468;
  --fv-mint-soft: #d6efe8;
  --fv-mint: #2da89c;

  /* Semantic colors — 低饱和 */
  --red: #c46060;
  --red-dim: rgba(196, 96, 96, 0.08);
  --green: #5a8a6a;
  --green-dim: rgba(90, 138, 106, 0.08);
  --blue: #5a8aaa;
  --blue-dim: rgba(90, 138, 170, 0.08);
  --yellow: #b89a4a;
  --yellow-dim: rgba(184, 154, 74, 0.08);
  --purple: #8b7b9b;
  --purple-dim: rgba(139, 123, 155, 0.08);

  /* Shadows */
  --sh-sm: 0 1px 3px rgba(40, 50, 40, 0.06);
  --sh-md: 0 4px 12px rgba(40, 50, 40, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;

  /* Layout */
  --sidebar-w: 200px;
  --topbar-h: 48px;
  --radius: 10px;
  --radius-lg: 12px;

  /* Typography */
  --mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Page / card defaults */
  --page-max-w: 1400px;
  --card-min-h: 120px;
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — Planetary Constellation Mode
   ═══════════════════════════════════════════════════════════════ */
body.dark {
  --bg: #0d1117;
  --bg2: #161b22;
  --s1: #1c2128;
  --s2: #21262d;
  --s3: #30363d;

  --border: #30363d;
  --border-2: #484f58;
  --border2: #484f58;

  --text: #e6edf3;
  --muted: #8b949e;
  --muted2: #6e7681;

  --accent: #1f9e8e;
  --accent-dim: rgba(31, 158, 142, 0.15);
  --accent-hover: #2ab8a6;
  --accent-glow: rgba(31, 158, 142, 0.25);

  --fv-gold: #c89a3a;
  --fv-gold-text: #e8c87a;
  --fv-gold-dim: rgba(200, 154, 58, 0.15);
  --fv-gold-soft: #3a2a08;
  --fv-indigo: #bc8cff;
  --fv-indigo-soft: #8a6aaa;
  --fv-mint-soft: #0d3a32;
  --fv-mint: #2da89c;

  --red: #f85149;
  --red-dim: rgba(248, 81, 73, 0.15);
  --green: #3fb950;
  --green-dim: rgba(63, 185, 80, 0.15);
  --blue: #58a6ff;
  --blue-dim: rgba(88, 166, 255, 0.15);
  --yellow: #d29922;
  --yellow-dim: rgba(210, 153, 34, 0.15);
  --purple: #bc8cff;
  --purple-dim: rgba(188, 140, 255, 0.15);

  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sh-md: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Dark Theme — override tokens via .dark on <body>
   Usage: <body class="dark"> or document.body.classList.add('dark')
   ============================================================ */
.dark {
  /* Background layers — GitHub Dark inspired */
  --bg: #0d1117;           /* page background */
  --bg2: #161b22;          /* legacy alias for --s2 */
  --s1: #161b22;           /* card / topbar / sidebar */
  --s2: #1c2128;           /* input / hover — elevated surface */
  --s3: #2d333b;           /* badge muted / bar chart */

  /* Borders */
  --border: #30363d;
  --border-2: #444c56;
  --border2: #444c56;  /* legacy alias */

  /* Text — high contrast on dark */
  --text: #e6edf3;         /* primary text */
  --muted: #8b949e;        /* secondary text */
  --muted2: #6e7681;       /* tertiary / disabled */

  /* Accent — keep mint */
  --accent: #1f9e8e;
  --accent-dim: rgba(31, 158, 142, 0.15);
  --accent-hover: #2bc4b2;
  --accent-glow: rgba(31, 158, 142, 0.22);

  /* Freeverse brand tokens — adjusted for dark bg */
  --fv-gold: #c89a3a;
  --fv-gold-text: #e8c96a;
  --fv-gold-dim: rgba(200, 154, 58, 0.15);
  --fv-gold-soft: #3d3018;
  --fv-indigo: #8b83d4;
  --fv-indigo-soft: #a59ed4;
  --fv-mint-soft: #1a3a35;
  --fv-mint: #3fbdae;

  /* Semantic colors — brighter for dark bg */
  --red: #f85149;
  --red-dim: rgba(248, 81, 73, 0.12);
  --green: #3fb950;
  --green-dim: rgba(63, 185, 80, 0.12);
  --blue: #58a6ff;
  --blue-dim: rgba(88, 166, 255, 0.12);
  --yellow: #d29922;
  --yellow-dim: rgba(210, 153, 34, 0.12);
  --purple: #bc8cff;
  --purple-dim: rgba(188, 140, 255, 0.12);

  /* Shadows — darker, more subtle */
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sh-md: 0 4px 12px rgba(0, 0, 0, 0.5);
}