/* ==========================================================================
   设计变量 —— 全站唯一的数值来源
   工具页只引用这里的变量，不写死颜色、间距、圆角。
   新增变量前先确认 base.css 里没有可复用的。
   ========================================================================== */

:root {
  color-scheme: light dark;

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

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

  /* 字号 */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 30px;

  --leading-tight: 1.25;
  --leading-normal: 1.65;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* 动效 */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* 布局 */
  --container: 940px;
  --control-height: 38px;
  --control-height-lg: 46px;
}

/* --------------------------------------------------------------------------
   浅色主题
   -------------------------------------------------------------------------- */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-muted: #f7f8fa;
  --surface-hover: #eef0f4;

  --text: #16181d;
  --text-muted: #5f6775;
  --text-faint: #939baa;

  --border: #e3e6eb;
  --border-strong: #ccd2db;

  --accent: #4356f0;
  --accent-hover: #3546d6;
  --accent-soft: #eef0ff;
  --on-accent: #ffffff;

  --danger: #d92d20;
  --danger-soft: #fef3f2;
  --success: #05764a;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
  --shadow-md: 0 6px 16px -4px rgb(16 24 40 / 8%), 0 2px 6px -2px rgb(16 24 40 / 5%);
  --shadow-lg: 0 24px 60px -16px rgb(16 24 40 / 22%);
  --focus-ring: 0 0 0 3px rgb(67 86 240 / 28%);
}

/* --------------------------------------------------------------------------
   深色主题：跟随系统，不提供手动切换（工具页无需主题开关）
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1014;
    --surface: #171a20;
    --surface-muted: #1d2027;
    --surface-hover: #232730;

    --text: #e9ecf1;
    --text-muted: #9aa3b2;
    --text-faint: #6f7887;

    --border: #262a33;
    --border-strong: #3a404c;

    --accent: #7d8cff;
    --accent-hover: #97a3ff;
    --accent-soft: #1e2440;
    --on-accent: #0d1020;

    --danger: #ff6b5e;
    --danger-soft: #2a1513;
    --success: #4ade80;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 8px 20px -6px rgb(0 0 0 / 50%);
    --shadow-lg: 0 28px 70px -18px rgb(0 0 0 / 70%);
    --focus-ring: 0 0 0 3px rgb(125 140 255 / 32%);
  }
}