/* ═══════════════════════════════════════════════════════════
   variables.css — 设计系统核心
   文件路径: /www/lanmao/static/css/variables.css
   说明: 定义全线配色、字体、间距、阴影、断点
   风格: 简约商务风 · 极简卡片 · 双主题（亮/暗）
   ═══════════════════════════════════════════════════════════ */

/* ───────────── 亮色主题（默认） ───────────── */
:root {
  /* ======== 主色 ======== */
  /* 主品牌色 — 深蓝，稳重专业，适合商务场景 */
  --primary-50:  #EFF3FF;
  --primary-100: #D6E0FF;
  --primary-200: #A8BFFF;
  --primary-300: #7A9CF5;
  --primary-400: #4D78E8;
  --primary-500: #1E56D4;       /* 主色 */
  --primary-600: #1642B0;
  --primary-700: #0F308C;
  --primary-800: #091F68;

  /* ======== 辅助色 ======== */
  /* 辅助色1 — 暖金，用于强调/促销/重要标记 */
  --accent-50:  #FFF9E6;
  --accent-400: #F5B342;
  --accent-500: #E89B1E;        /* 辅助色主值 */
  --accent-600: #C47E14;

  /* 辅助色2 — 翠绿，用于成功状态/绿色操作 */
  --success-50:  #E8F8EE;
  --success-400: #3ECF7A;
  --success-500: #1DB954;       /* 成功色 */
  --success-600: #159B45;

  /* 辅助色3 — 赤红，用于错误/警告 */
  --danger-50:   #FDE8E8;
  --danger-400:  #F05A5A;
  --danger-500:  #DC3545;       /* 错误色 */
  --danger-600:  #B92D3B;

  /* ======== 中性色（灰度系统） ======== */
  --gray-50:  #F8F9FB;
  --gray-100: #F0F2F5;
  --gray-200: #E2E5EB;
  --gray-300: #C5CAD4;
  --gray-400: #9CA3AF;
  --gray-500: #727A8A;
  --gray-600: #525B6B;
  --gray-700: #3B4352;
  --gray-800: #252C38;
  --gray-900: #12161E;

  /* ======== 背景 & 表面 ======== */
  --bg-body:       var(--gray-50);      /* 页面背景 */
  --bg-surface:    #FFFFFF;             /* 卡片/表面背景 */
  --bg-elevated:   #FFFFFF;             /* 悬浮/弹窗背景 */
  --bg-hover:      var(--gray-100);     /* 悬停态背景 */
  --bg-nav:        rgba(255,255,255,0.88); /* 导航栏背景 */

  /* ======== 文字 ======== */
  --text-primary:   var(--gray-900);    /* 主文字 */
  --text-secondary: var(--gray-600);    /* 次级文字 */
  --text-tertiary:  var(--gray-400);    /* 辅助文字 */
  --text-inverse:   #FFFFFF;            /* 反色文字 */

  /* ======== 边框 & 分割线 ======== */
  --border:         var(--gray-200);    /* 常规边框 */
  --border-light:   var(--gray-100);    /* 浅边框 */
  --border-focus:   var(--primary-400); /* 聚焦边框 */

  /* ======== 阴影 ======== */
  --shadow-sm:  0 1px 2px rgba(18,22,30,0.04);
  --shadow-md:  0 4px 12px rgba(18,22,30,0.06);
  --shadow-lg:  0 8px 30px rgba(18,22,30,0.08);
  --shadow-xl:  0 20px 60px rgba(18,22,30,0.10);

  /* ======== 圆角 ======== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ======== 间距（4px 基数） ======== */
  --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;

  /* ======== 字体 ======== */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro SC",
               "PingFang SC", "Noto Sans SC", "Microsoft YaHei",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "JetBrains Mono",
               "Cascadia Code", Consolas, monospace;

  /* 字号 */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  /* 字重 */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 行高 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* ======== 布局 ======== */
  --max-w:      1200px;
  --max-w-narrow: 820px;
  --header-h:   64px;
  --nav-blur:   blur(18px);

  /* ======== 过渡 ======== */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ======== z-index 体系 ======== */
  --z-dropdown: 100;
  --z-nav:      1000;
  --z-modal:    2000;
  --z-toast:    3000;
}

/* ───────────── 暗黑主题 ───────────── */
[data-theme="dark"] {
  --bg-body:       #0F1318;
  --bg-surface:    #1A1F26;
  --bg-elevated:   #242B33;
  --bg-hover:      rgba(255,255,255,0.05);
  --bg-nav:        rgba(15,19,24,0.90);

  --text-primary:   #E8EDF5;
  --text-secondary: #9BA3B0;
  --text-tertiary:  #6B7280;

  --border:         rgba(255,255,255,0.08);
  --border-light:   rgba(255,255,255,0.04);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.55);

  --primary-50:  rgba(30,86,212,0.12);
  --primary-100: rgba(30,86,212,0.20);
  --primary-200: #2D5FCC;
  --primary-300: #3A72E0;
  --primary-400: #5588F0;
  --primary-500: #6A9CFF;     /* 暗色主色 — 提亮保证可读性 */
  --primary-600: #88B0FF;
  --primary-700: #A6C4FF;
  --primary-800: #C4D8FF;
}