/* ============================================================================
   设计令牌
   所有颜色、间距、字号、圆角、阴影、动效都在这里定义一次，组件里只引用变量。
   浅色是基准，深色只覆盖颜色变量 —— 尺寸类令牌两套主题共用。
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- 间距（4 的倍数，保持垂直节奏一致） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* ---- 字号 ---- */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

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

  /* ---- 圆角 ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* ---- 层级 ---- */
  --z-sticky: 100;
  --z-drawer: 200;
  --z-toast: 300;

  /* ---- 动效 ---- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);

  /* ---- 布局 ---- */
  --sidebar-w: 216px;
  --topbar-h: 56px;
  --content-max: 1440px;

  /* ---- 颜色：浅色主题 ---- */
  --bg: #f6f7f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --surface-3: #e8ebf1;
  --surface-hover: #f5f7fa;

  --border: #e3e6ec;
  --border-strong: #ccd1db;

  --text: #14181f;
  --text-2: #565e6d;
  --text-3: #868d9b;
  --text-inverse: #ffffff;

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-active: #3730a3;
  --accent-soft: #eef1fe;
  --accent-border: #c7cdfa;
  --accent-text: #ffffff;

  --success: #15803d;
  --success-soft: #e8f6ec;
  --success-border: #b3e0c1;

  --warn: #b45309;
  --warn-soft: #fdf3e3;
  --warn-border: #f0d5a8;

  --danger: #c62828;
  --danger-soft: #fdeded;
  --danger-border: #f4c2c2;

  --info: #0369a1;
  --info-soft: #e7f3fb;
  --info-border: #b3d9ee;

  --neutral-soft: #eef0f4;
  --neutral-border: #d8dce4;


  /* ---- 阴影 ---- */
  --shadow-xs: 0 1px 2px rgba(16, 22, 34, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 22, 34, 0.07), 0 1px 2px rgba(16, 22, 34, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 22, 34, 0.08), 0 1px 3px rgba(16, 22, 34, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 22, 34, 0.12), 0 2px 8px rgba(16, 22, 34, 0.06);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.22);
}

/* 深色主题：显式选择优先，其次跟随系统。
   两个选择器都写，保证「切换」在两个方向上都能覆盖系统偏好。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0c0f15;
    --bg-elevated: #151a23;
    --surface: #151a23;
    --surface-2: #1b212c;
    --surface-3: #232a37;
    --surface-hover: #1e2530;

    --border: #262d3a;
    --border-strong: #3a4353;

    --text: #e7eaf1;
    --text-2: #9ba4b4;
    --text-3: #6d7688;
    --text-inverse: #0c0f15;

    --accent: #7c85f5;
    --accent-hover: #8f97f8;
    --accent-active: #a3a9fa;
    --accent-soft: #1c2038;
    --accent-border: #333a63;
    --accent-text: #0c0f15;

    --success: #4ade80;
    --success-soft: #10241a;
    --success-border: #1d4430;

    --warn: #fbbf24;
    --warn-soft: #251c0c;
    --warn-border: #4a3714;

    --danger: #f87171;
    --danger-soft: #2a1315;
    --danger-border: #4d2226;

    --info: #56b6e8;
    --info-soft: #0e2029;
    --info-border: #1c3d4f;

    --neutral-soft: #1e2531;
    --neutral-border: #333c4b;


    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3px rgba(124, 133, 245, 0.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c0f15;
  --bg-elevated: #151a23;
  --surface: #151a23;
  --surface-2: #1b212c;
  --surface-3: #232a37;
  --surface-hover: #1e2530;

  --border: #262d3a;
  --border-strong: #3a4353;

  --text: #e7eaf1;
  --text-2: #9ba4b4;
  --text-3: #6d7688;
  --text-inverse: #0c0f15;

  --accent: #7c85f5;
  --accent-hover: #8f97f8;
  --accent-active: #a3a9fa;
  --accent-soft: #1c2038;
  --accent-border: #333a63;
  --accent-text: #0c0f15;

  --success: #4ade80;
  --success-soft: #10241a;
  --success-border: #1d4430;

  --warn: #fbbf24;
  --warn-soft: #251c0c;
  --warn-border: #4a3714;

  --danger: #f87171;
  --danger-soft: #2a1315;
  --danger-border: #4d2226;

  --info: #56b6e8;
  --info-soft: #0e2029;
  --info-border: #1c3d4f;

  --neutral-soft: #1e2531;
  --neutral-border: #333c4b;


  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(124, 133, 245, 0.3);
}