/* ============================================================================
 * theme.css — v3.1.0 设计系统统一变量
 * ============================================================================
 * 用途: 把 8 个 HTML 文件硬编码的 hex 颜色集中管理
 *      任何主题色调整只需改这里一处
 * 引用: 在每个 HTML 的 <head> 加 <link rel="stylesheet" href="/css/theme.css?v=3.1.0">
 * ============================================================================ */

:root {
  /* 主色系 */
  --primary: #1F4E78;
  --primary-light: #305496;
  --primary-dark: #1E3A8A;
  --accent: #F4B084;
  --accent-blue: #0891B2;

  /* 状态色（浅背景 + 深前景） */
  --success: #2E7D32;
  --success-dark: #15803D;
  --success-bg: #E2F0D9;
  --success-soft: #DCFCE7;
  --success-text: #065F46;

  --danger: #C00000;
  --danger-dark: #B91C1C;
  --danger-bg: #FCE4D6;
  --danger-soft: #FEE2E2;
  --danger-text: #991B1B;

  --warning: #ED7D31;
  --warning-dark: #B45309;
  --warning-bg: #FFF2CC;
  --warning-soft: #FEF3C7;

  --info: #7030A0;
  --info-dark: #6D28D9;
  --info-bg: #E8D9F2;
  --info-soft: #EDE9FE;

  /* 语义色（标签 / 分类 / 状态细分） */
  --tag-green: #047857;
  --tag-green-bg: #fafbfc;
  --tag-amber: #92400e;
  --tag-amber-bg: #fef3c7;
  --tag-indigo: #3730A3;
  --tag-indigo-bg: #E0E7FF;
  --tag-cyan: #155E75;
  --tag-cyan-bg: #CFFAFE;
  --tag-fuchsia: #6B21A8;
  --tag-fuchsia-bg: #FAE8FF;
  --tag-pink: #9F1239;
  --tag-pink-bg: #FCE7F3;

  /* 特殊场景（密码强度条 / 错误页渐变 / 输入卡片） */
  --amber-600: #D97706;
  --blue-50: #EFF6FF;
  --green-50: #F0FDF4;
  --red-500: #EF4444;
  --red-300: #FCA5A5;
  --sky-300: #93C5FD;
  --slate-300: #CBD5E1;
  --slate-500: #64748B;
  --slate-100: #F1F5F9;
  --error-bg-from: #F5F7FA;
  --error-bg-to: #C3CFE2;

  /* 补充语义色（index.html 残余） */
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-300: #FCA5A5;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --amber-600: #D97706;
  --amber-700: #78350F;
  --green-600: #16A34A;
  --yellow-bg: #FFE4B5;
  --yellow-400: #FBBF24;
  --orange-500: #F59E0B;
  --blue-50: #DEEBF7;
  --blue-100: #DBEAFE;
  --green-100: #D1FAE5;
  --bronze: #CD7F32;
  --red-700: #B91C1C;
  --blue-700: #1E40AF;
  --green-700: #15803D;

  /* 灰阶（替代 12 处硬编码 #f3f4f6 / #e5e7eb 等） */
  --bg: #F8F9FB;
  --bg-soft: #F9FAFB;
  --surface: #FFFFFF;
  --surface-2: #F3F4F6;
  --surface-3: #E5E7EB;

  --text: #1F2937;
  --text-muted: #6B7280;
  --text-light: #9CA3AF;
  --text-subtle: #4B5563;
  --text-deep: #374151;
  --border: #E5E9F0;
  --border-soft: #DBEAFE;
  --overlay: rgba(15, 23, 42, 0.6);

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* 间距/圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ============ 原子类（高频使用的简单组合） ============ */
.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.bg-primary { background: var(--primary); }
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.border-default { border-color: var(--border); }