/* ============================================================
   variables.css — Design Tokens
   基于 VibeCamp 设计系统：暖中性底色 + 橙红品牌色 + 18px 统一大圆角
   ============================================================ */

/* ---------- 浅色主题 :root ---------- */
:root {
  /* 基础与表面 */
  --background: #e3dfd9;
  --muted: #ece7e1;
  --card: #f3f0eb;
  --popover: #f7f4ef;

  /* 文字 */
  --foreground: #211d1a;
  --muted-foreground: #5c5650;
  --card-foreground: #211d1a;

  /* 品牌与交互 */
  --primary: #f1481e;
  --primary-foreground: #fff7f3;
  --secondary: #1d1e20;
  --secondary-foreground: #ffffff;
  --accent: #ded7cf;
  --accent-foreground: #211d1a;
  --border: #cbc3ba;
  --ring: #f7663c;

  /* 代码块专用深色（无论浅色深色均使用统一高级暗色底） */
  --code-bg: #1d1e20;
  --code-foreground: #ede8e3;
  --code-border: #2f2c28;

  /* 暖色粒子色板（用于 JS 与渐变） */
  --particle-1: #f1481e;
  --particle-2: #ff845f;
  --particle-3: #ffc8b5;

  /* 字体系统 */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* 几何圆角规范 */
  --radius: 18px;          /* 统一大圆角：主卡片、容器、大按钮 */
  --radius-nav: 24px;      /* 导航胶囊圆角 */
  --radius-sm: 10px;       /* 内嵌选中项、小胶囊、筛选标签 */
  --radius-full: 9999px;   /* 完全胶囊 */

  /* 间距基准 (4px grid) */
  --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;
  --space-24: 96px;

  /* 容器限制 */
  --container-max: 1080px;
  --container-narrow: 760px;
  --container-padding: 24px;

  /* 动效曲线与持续时间 */
  --transition-fast: 0.16s ease;
  --transition-base: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow: 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-enter: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* 阴影（平时几乎无阴影，hover 才出淡阴影） */
  --shadow-none: none;
  --shadow-card-hover: 0 12px 36px rgba(33, 29, 26, 0.08);
  --shadow-nav: 0 4px 24px rgba(33, 29, 26, 0.05);
}

/* ---------- 深色主题 .dark ---------- */
.dark {
  --background: #1e1a16;
  --muted: #221d19;
  --card: #2a2521;
  --popover: #302923;

  --foreground: #f2ede7;
  --muted-foreground: #b4aba2;
  --card-foreground: #f2ede7;

  --primary: #f1481e;
  --primary-foreground: #31150d;
  --secondary: #1d1e20;
  --secondary-foreground: #f2ede7;
  --accent: #443c35;
  --accent-foreground: #f2ede7;
  --border: #3a322c;
  --ring: #f7663c;

  --code-bg: #161311;
  --code-foreground: #f2ede7;
  --code-border: #332b25;

  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.36);
  --shadow-nav: 0 4px 24px rgba(0, 0, 0, 0.28);
}