/* ==========================================================================
   设计令牌（Design Tokens）— Soft UI（新拟物）语言
   日间：灰底 + 白色浮起的双向柔和阴影（8/8/20 光暗对）
   夜间：slate-900 底 + slate-800 面 + 顶部白色发丝高光 + 深色投影
   统一色彩、间距、圆角、阴影、动效曲线；浅色/深色双主题。
   v5.0.0：全部颜色/阴影按 Soft UI 重写，令牌名称保持向后兼容，仅新增拟物相关令牌。
   ========================================================================== */

:root {
  /* ---------- 品牌色（Indigo / 靛蓝） ---------- */
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  --accent-violet: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-cyan: #22d3ee;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  /* 品牌填充（v5.2.0 起**默认纯色**：全站减少渐变，色块一律用纯色 + 柔和阴影表达层次） */
  --fill-brand: var(--brand-500);
  --fill-brand-strong: var(--brand-600);
  --fill-brand-soft: var(--brand-50);
  /* 品牌淡染（图标底、选中态、提示条底色）：纯色混合，不是渐变 */
  --tint-brand: color-mix(in srgb, var(--brand-500) 12%, transparent);
  --tint-brand-strong: color-mix(in srgb, var(--brand-500) 20%, transparent);

  /* 兼容旧名（v5.0 引入的渐变令牌）：v5.2.0 起已改为纯色，
     保留名字只为不破坏既有页面样式；新代码请直接用 --fill-brand / --tint-brand。 */
  --gradient-brand: var(--fill-brand);
  --gradient-brand-soft: var(--tint-brand);

  /* ---------- 语义色 ---------- */
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --info: #6366f1;
  --info-soft: rgba(99, 102, 241, 0.12);

  /* ---------- 间距（8px 基准） ---------- */
  --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;

  /* ---------- 圆角（Soft UI：rounded-xl 12 / 2xl 16 / 3xl 24） ---------- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- 字体 ---------- */
  --font-sans: 'Albert Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Fragment Mono', 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Consolas,
    'Liberation Mono', monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 44px;

  /* ---------- 动效（Soft UI：duration-300 ease-in-out；入场 cubic-bezier(.16,1,.3,1)） ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-normal: 300ms;
  --dur-slow: 420ms;
  --dur-slower: 600ms;

  /* ---------- 层级 ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* ---------- 布局尺寸 ---------- */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 64px;
  --content-max: 1440px;

  /* ---------- 拟物（Soft UI）基础变量 ----------
     浅色：浮面 = 右下深影 + 左上白色高光；深色：只有深影 + 顶部发丝高光。
     成对阴影直接写在 --shadow-* 里，这两个变量供皮肤层（soft-ui.css）组合使用。 */
  --neu-highlight: rgba(255, 255, 255, 0.92);
  --neu-shadow: rgba(15, 23, 42, 0.09);
}

/* ==========================================================================
   浅色主题（Soft UI 日间）
   ========================================================================== */
:root,
[data-theme='light'] {
  color-scheme: light;

  --bg-app: #e8ecf3;
  /* v5.2.0：日间**不再铺彩色氛围渐变**，保持干净的灰底（层次全部交给卡片阴影） */
  --bg-app-gradient: none;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-surface-sunken: #e2e7ef;
  --bg-muted: #eef2f8;
  --bg-hover: rgba(15, 23, 42, 0.045);
  --bg-active: rgba(99, 102, 241, 0.1);
  --bg-inverse: #1f2937;

  --bg-glass: rgba(255, 255, 255, 0.7);
  --bg-glass-strong: rgba(255, 255, 255, 0.88);

  --text-primary: #1f2937;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  --text-on-brand: #ffffff;

  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-default: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.18);

  /* 浮起：光从左上、影到右下 */
  --shadow-xs: 3px 3px 8px rgba(99, 102, 241, 0.12), -3px -3px 8px var(--neu-highlight);
  --shadow-sm: 4px 4px 10px var(--neu-shadow), -4px -4px 10px var(--neu-highlight);
  --shadow-md: 8px 8px 20px rgba(15, 23, 42, 0.07), -8px -8px 20px rgba(255, 255, 255, 0.9);
  --shadow-lg: 12px 12px 30px rgba(15, 23, 42, 0.09), -10px -10px 26px rgba(255, 255, 255, 0.94);
  --shadow-xl: 18px 18px 44px rgba(15, 23, 42, 0.13), -12px -12px 34px rgba(255, 255, 255, 0.9);
  --shadow-brand: 0 10px 24px rgba(99, 102, 241, 0.35);

  /* 凹陷：输入框 / 分段轨道 / 进度槽 */
  --shadow-inset: inset 3px 3px 7px rgba(15, 23, 42, 0.08), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
  --shadow-inset-sm: inset 2px 2px 5px rgba(15, 23, 42, 0.06), inset -2px -2px 5px rgba(255, 255, 255, 0.85);
  --shadow-pressed: inset 3px 3px 8px rgba(15, 23, 42, 0.1), inset -2px -2px 6px rgba(255, 255, 255, 0.85);
  --shadow-focus: 0 0 0 4px rgba(99, 102, 241, 0.18);
  --shadow-glow-brand: 0 0 18px rgba(99, 102, 241, 0.35);

  --sidebar-bg: rgba(255, 255, 255, 0.66);
  --sidebar-border: rgba(15, 23, 42, 0.06);
  --topbar-bg: rgba(255, 255, 255, 0.62);

  --skeleton-base: rgba(15, 23, 42, 0.06);
  --skeleton-shine: rgba(255, 255, 255, 0.85);

  --scrollbar-thumb: rgba(100, 116, 139, 0.35);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.55);
}

/* ==========================================================================
   深色主题（Soft UI 夜间 / soft dark）
   ========================================================================== */
[data-theme='dark'] {
  color-scheme: dark;

  --bg-app: #0f172a;
  /* v5.2.0：夜间只留**一层**很淡的品牌光晕（原来三色渐变太花），不再有紫/青撞色 */
  --bg-app-gradient: radial-gradient(1100px 620px at 8% -12%, rgba(99, 102, 241, 0.14), transparent 62%);
  --bg-surface: #1e293b;
  --bg-surface-raised: #263349;
  --bg-surface-sunken: #151f33;
  --bg-muted: rgba(148, 163, 184, 0.08);
  --bg-hover: rgba(148, 163, 184, 0.12);
  --bg-active: rgba(129, 140, 248, 0.2);
  --bg-inverse: #f8fafc;

  --bg-glass: rgba(30, 41, 59, 0.72);
  --bg-glass-strong: rgba(30, 41, 59, 0.9);

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #0f172a;
  --text-on-brand: #ffffff;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* 夜间深度：顶部发丝高光 + 深色投影 */
  --shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-brand: 0 10px 26px rgba(99, 102, 241, 0.45);

  --shadow-inset: inset 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-inset-sm: inset 0 1px 4px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-pressed: inset 0 3px 8px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.4);
  --shadow-glow-brand: 0 0 18px rgba(99, 102, 241, 0.4);

  --sidebar-bg: rgba(15, 23, 42, 0.82);
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --topbar-bg: rgba(15, 23, 42, 0.76);

  --skeleton-base: rgba(148, 163, 184, 0.12);
  --skeleton-shine: rgba(148, 163, 184, 0.24);

  --scrollbar-thumb: rgba(148, 163, 184, 0.28);
  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.44);

  --success-soft: rgba(16, 185, 129, 0.18);
  --warning-soft: rgba(245, 158, 11, 0.18);
  --danger-soft: rgba(239, 68, 68, 0.18);
  --info-soft: rgba(99, 102, 241, 0.2);

  --neu-highlight: rgba(255, 255, 255, 0.06);
  --neu-shadow: rgba(0, 0, 0, 0.55);
}

/* 减少动效偏好：尊重系统设置 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-normal: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
}