/* ============================================================
 * 穷逼王朝工具箱 · 主题变量 (Design Tokens)
 * ------------------------------------------------------------
 * 全站所有颜色 / 圆角 / 阴影 / 间距都定义在这里。
 * 想换主题色，只需改动 :root 里的 --brand 系列变量即可全局生效，
 * 无需改动任何组件样式 —— 这是「模块化」的基础。
 * ============================================================ */

:root {
  /* ----- 品牌主色：明亮科技蓝 ----- */
  --brand-50:  #EFF6FF;
  --brand-100: #DBEAFE;
  --brand-200: #BFDBFE;
  --brand-300: #93C5FD;
  --brand-400: #60A5FA;
  --brand-500: #3B82F6;
  --brand-600: #2563EB;
  --brand-700: #1D4ED8;
  --brand-800: #1E40AF;
  --brand-900: #1E3A8A;

  /* 主色别名（供组件直接引用） */
  --brand: var(--brand-500);
  --brand-strong: var(--brand-600);
  --brand-gradient: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%);

  /* ----- 前景 / 背景（明亮主题） ----- */
  --bg:            #F5F8FF;   /* 页面背景：极浅蓝 */
  --bg-soft:       #FFFFFF;   /* 卡片背景 */
  --bg-sunken:     #EDF2FA;   /* 内嵌区域 / 输入框 */
  --surface-hover: #F0F6FF;

  --text:          #0F172A;   /* 主文字 */
  --text-2:        #475569;   /* 次级文字 */
  --text-3:        #94A3B8;   /* 弱化文字 */
  --text-invert:   #FFFFFF;

  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  /* ----- 语义色 ----- */
  --success:       #10B981;
  --success-soft:  #ECFDF5;
  --warning:       #F59E0B;
  --warning-soft:  #FFFBEB;
  --danger:        #EF4444;
  --danger-soft:   #FEF2F2;
  --info:          #06B6D4;

  /* ----- 圆角 ----- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ----- 阴影（明亮柔和）----- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:    0 4px 16px rgba(51, 92, 221, .08);
  --shadow-lg: 0 18px 44px rgba(51, 92, 221, .14);
  --shadow-brand: 0 10px 30px rgba(59, 130, 246, .30);

  /* ----- 动效 ----- */
  --transition: .22s cubic-bezier(.4, 0, .2, 1);

  /* ----- 布局尺寸 ----- */
  --container: 1180px;
  --nav-h: 68px;
}