/* =========================================================
   tokens.css — 设计变量（颜色 / 间距 / 圆角 / 阴影 / 字体）
   主题：浅色默认（莫兰迪灰）+ [data-theme="dark"] 重写
   配色：低饱和度灰系 + 4 个莫兰迪色光斑（灰粉/灰蓝/灰绿/灰黄）
   ========================================================= */

:root {
  /* 颜色 — Light（莫兰迪灰） */
  --bg:           #e8e5dd;                       /* 莫兰迪暖灰背景 */
  --bg-elev:      rgba(255, 255, 255, 0.50);     /* 玻璃卡片（更透） */
  --bg-sunk:      rgba(60, 55, 48, 0.08);        /* 内块（半透明深灰） */
  --bg-glass:     rgba(255, 255, 255, 0.50);

  --ink:          #3a3a36;                       /* 深灰文字（不是纯黑） */
  --ink-2:        #5a5a55;
  --ink-3:        #8a8a82;
  --ink-4:        #abaaa3;

  --line:         rgba(60, 55, 48, 0.18);
  --line-soft:    rgba(60, 55, 48, 0.08);

  --brand:        #6b8294;                       /* 莫兰迪灰蓝（主强调） */
  --brand-ink:    #4a5d6b;
  --brand-bg:     rgba(107, 130, 148, 0.20);
  --brand-glow:   rgba(107, 130, 148, 0.35);

  --success:      #7a9b85;                       /* 莫兰迪灰绿（小圆点） */

  /* 莫兰迪 mesh gradient 配色（base.css 引用） */
  --morandi-pink:   #d8c5c0;                     /* 灰粉 */
  --morandi-blue:   #a8b8c4;                     /* 灰蓝 */
  --morandi-green:  #a8c4b0;                     /* 灰绿 */
  --morandi-yellow: #d4c8a8;                     /* 灰黄 */

  /* 圆角 */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(60, 55, 48, 0.06);
  --shadow-2: 0 4px 16px -4px rgba(60, 55, 48, 0.12),
              0 1px 2px rgba(60, 55, 48, 0.06);
  --shadow-glass: 0 12px 36px -8px rgba(60, 55, 48, 0.18),
                  inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Segoe UI", "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono",
               Menlo, Monaco, Consolas, monospace;

  /* 间距系统（8 倍数） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* 容器宽度 */
  --container: 1080px;
}

/* =========================================================
   Dark Theme（保持不变）
   ========================================================= */
[data-theme="dark"] {
  --bg:           #000000;
  --bg-elev:      #1c1c1e;
  --bg-sunk:      #2c2c2e;
  --bg-glass:     rgba(28, 28, 30, 0.72);

  --ink:          #f5f5f7;
  --ink-2:        #d1d1d6;
  --ink-3:        #8e8e93;
  --ink-4:        #636366;

  --line:         #38383a;
  --line-soft:    #2c2c2e;

  --brand:        #2997ff;
  --brand-ink:    #64b5ff;
  --brand-bg:     rgba(41, 151, 255, 0.16);
  --brand-glow:   rgba(41, 151, 255, 0.40);

  --success:      #30d158;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.5),
              0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-glass: 0 8px 32px -8px rgba(0, 0, 0, 0.5),
                  inset 0 1px 0 rgba(255, 255, 255, 0.06);
}