/* ============================================================
   AI 广告推广系统 · 主题变量（浅色 / 深色）
   通过 <html data-theme="light|dark"> 切换
   ============================================================ */

:root,
html[data-theme='light'] {
  color-scheme: light;

  /* 品牌色 */
  --brand-1: #5b5bf5;
  --brand-2: #7c4dff;
  --brand-3: #06b6d4;
  --brand-grad: linear-gradient(135deg, #5b5bf5 0%, #7c4dff 45%, #06b6d4 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(91, 91, 245, 0.12), rgba(6, 182, 212, 0.12));

  /* 语义色 */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* 背景层级 */
  --bg-app: #f4f6fb;
  --bg-app-2: #eef1f8;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8fafc;
  --bg-surface-3: #eef2f7;
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-sidebar: linear-gradient(180deg, #ffffff 0%, #f7f8fd 100%);
  --bg-hover: rgba(91, 91, 245, 0.07);
  --bg-active: rgba(91, 91, 245, 0.12);

  /* 文字 */
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --text-invert: #ffffff;

  /* 边框 / 分割 */
  --border-1: #e4e8f0;
  --border-2: #d3dae6;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 8px 28px rgba(91, 91, 245, 0.28);

  /* 装饰光斑 */
  --orb-1: rgba(91, 91, 245, 0.34);
  --orb-2: rgba(6, 182, 212, 0.28);
  --orb-3: rgba(124, 77, 255, 0.22);

  /* 骨架屏 */
  --skeleton: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%);
}

html[data-theme='dark'] {
  color-scheme: dark;

  --brand-1: #7b7bff;
  --brand-2: #a78bfa;
  --brand-3: #22d3ee;
  --brand-grad: linear-gradient(135deg, #6d6dff 0%, #a78bfa 45%, #22d3ee 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(109, 109, 255, 0.18), rgba(34, 211, 238, 0.14));

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;

  --bg-app: #0b0f1a;
  --bg-app-2: #0e1424;
  --bg-surface: #141b2d;
  --bg-surface-2: #1a2236;
  --bg-surface-3: #212b42;
  --bg-glass: rgba(20, 27, 45, 0.72);
  --bg-sidebar: linear-gradient(180deg, #121a2b 0%, #0d1424 100%);
  --bg-hover: rgba(123, 123, 255, 0.12);
  --bg-active: rgba(123, 123, 255, 0.2);

  --text-1: #eef2ff;
  --text-2: #a8b3cc;
  --text-3: #6b7899;
  --text-invert: #0b0f1a;

  --border-1: #232d47;
  --border-2: #2e3a58;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 8px 30px rgba(109, 109, 255, 0.4);

  --orb-1: rgba(109, 109, 255, 0.4);
  --orb-2: rgba(34, 211, 238, 0.3);
  --orb-3: rgba(167, 139, 250, 0.28);

  --skeleton: linear-gradient(90deg, #1a2236 25%, #212b42 50%, #1a2236 75%);
}

/* 主题切换过渡：仅作用于颜色相关属性，避免触发布局抖动 */
html.theme-anim,
html.theme-anim * {
  transition:
    background-color 0.32s ease,
    border-color 0.32s ease,
    color 0.22s ease,
    fill 0.32s ease,
    box-shadow 0.32s ease !important;
}