/* ============================================
   CSS 变量定义（统一在这里修改）
   | 变量名                     | 用途           |
| ----------------------- | ------------ |
| `--color-primary`       | 主题色（深蓝）      |
| `--color-primary-light` | 亮蓝色（按钮、链接）   |
| `--color-text-main`     | 主文字色 #333    |
| `--color-text-title`    | 标题色 #222     |
| `--color-bg-page`       | 页面背景 #f5f7fa |
| `--color-bg-card`       | 卡片背景 #fff    |
| `--shadow-card`         | 卡片阴影         |
| `--radius-xl`           | 大圆角 1rem     |
| `--gap-lg`              | 大间距 1rem     |
| `--font-2xl`            | 大字体 1.6rem   |
   ============================================ */


/* ============================================
   CSS 变量定义（统一在这里修改）
   ============================================ */
:root {
    /* 主题色 */
    --color-primary: rgb(28, 69, 135);
    --color-primary-light: #3b78f5;
    --color-primary-bg: #f0f6ff;
    --color-primary-bg-light: #e6f0ff;

    /* 文字色 */
    --color-text-main: #333;
    --color-text-title: #222;
    --color-text-title-dark: #111;
    --color-text-body: rgba(0, 0, 0, .9);
    --color-text-desc: #777;
    --color-text-muted: #666;
    --color-text-light: #999;
    --color-text-lighter: #bbb;
    --color-text-faint: #aaa;
    --color-text-placeholder: #888;

    /* 背景色 */
    --color-bg-line: #3b78f5;
    --color-bg-page: #f5f7fa;
    --color-bg-card: #fff;
    --color-bg-light: #f7f8fa;
    --color-bg-lighter: #f8f9fa;
    --color-bg-hover: #f0f4ff;
    --color-bg-active: #e0ebff;

    /* 边框/分割线 */
    --color-border: #eee;
    --color-border-light: #e6ebf2;
    --color-border-dashed: #ddd;

    /* 功能色 */
    --color-danger: #f25656;
    --color-danger-light: #ff6b6b;
    --color-danger-bg: #fff0f0;
    --color-success: #07c160;

    /* 阴影 */
    --shadow-sm: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
    --shadow-card: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.04);
    --shadow-card-lg: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.05);
    --shadow-float: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
    --shadow-modal: 0 0.6rem 2rem rgba(0, 0, 0, 0.12);

    /* 圆角 */
    --radius-sm: 0.4rem;
    --radius-md: 0.6rem;
    --radius-lg: 0.8rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.2rem;
    --radius-3xl: 1.4rem;
    --radius-full: 999px;

    /* 间距 */
    --gap-xs: 0.4rem;
    --gap-sm: 0.6rem;
    --gap-md: 0.8rem;
    --gap-lg: 1rem;
    --gap-xl: 1.2rem;
    --gap-2xl: 1.6rem;
    --gap-3xl: 2rem;

    /* 字体大小（手机默认） */
    --font-xs: 1rem;
    --font-sm: 1.1rem;
    --font-md: 1.2rem;
    --font-base: 1.3rem;
    --font-lg: 1.4rem;
    --font-xl: 1.5rem;
    --font-2xl: 1.6rem;
    --font-3xl: 1.7rem;
    --font-title: 2rem;

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}