/* ==========================================================
   设计令牌（Design Tokens）
   全站颜色 / 圆角 / 缓动 / 阴影的唯一来源。
   换肤：只改这里的变量，不用碰任何组件样式。
   ========================================================== */

:root {
  color-scheme: light;

  /* ---------- 字体 ---------- */
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- 圆角 ---------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---------- 缓动与时长（大厂常用的 expo / spring 曲线）---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: .16s;
  --dur-2: .28s;
  --dur-3: .5s;
  --dur-4: .8s;
  --dur-5: 1.2s;

  /* ---------- 布局 ---------- */
  --max: 1200px;
  --gutter: 24px;
  --header-h: 72px;

  /* ---------- 品牌色 ---------- */
  --brand-400: #6366f1;
  --brand-500: #4f46e5;
  --brand-600: #4338ca;
  --violet-500: #7c3aed;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;

  --grad-brand: linear-gradient(135deg, var(--brand-500), var(--violet-500) 55%, var(--cyan-500));
  --grad-text: linear-gradient(100deg, #6366f1, #8b5cf6 42%, #22d3ee);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(99, 102, 241, .5), transparent);

  /* ---------- 亮色主题 ---------- */
  --bg: #fbfbfd;
  --bg-alt: #f4f5f9;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eff1f7;
  --glass: rgba(255, 255, 255, .70);

  --text: #0a0f1e;
  --text-2: #39415a;
  --muted: #68718a;
  --faint: #98a1b6;

  --line: rgba(10, 15, 30, .09);
  --line-2: rgba(10, 15, 30, .16);

  /* Bento 卡片的渐变描边 */
  --edge: rgba(10, 15, 30, .10);
  --edge-hover: rgba(79, 70, 229, .45);

  --sh-1: 0 1px 2px rgba(10, 15, 30, .05), 0 2px 8px rgba(10, 15, 30, .04);
  --sh-2: 0 2px 6px rgba(10, 15, 30, .05), 0 14px 34px rgba(10, 15, 30, .08);
  --sh-3: 0 10px 30px rgba(10, 15, 30, .07), 0 40px 80px rgba(10, 15, 30, .10);
  --sh-brand: 0 10px 30px rgba(79, 70, 229, .28);

  /* Hero 恒定深色（保证首屏冲击力） */
  --hero-1: #060917;
  --hero-2: #12122e;
  --hero-text: #f6f8ff;
  --hero-muted: #a5afd0;
  --hero-line: rgba(255, 255, 255, .12);

  --ok: #12b76a;
  --warn: #f79009;
  --err: #f04438;
}

/* ---------- 暗色主题 ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #06080f;
  --bg-alt: #0a0d18;
  --surface: #0e1220;
  --surface-2: #131829;
  --surface-3: #1a2136;
  --glass: rgba(8, 11, 20, .70);

  --text: #eef1fa;
  --text-2: #c3cade;
  --muted: #8d97b0;
  --faint: #6a748e;

  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);

  --edge: rgba(255, 255, 255, .10);
  --edge-hover: rgba(129, 140, 248, .50);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .35);
  --sh-3: 0 10px 30px rgba(0, 0, 0, .45), 0 40px 80px rgba(0, 0, 0, .45);
  --sh-brand: 0 10px 34px rgba(79, 70, 229, .40);

  --hero-1: #05070e;
  --hero-2: #0d1024;
  --hero-text: #f6f8ff;
  --hero-muted: #9aa5c6;
  --hero-line: rgba(255, 255, 255, .10);
}