/* ==========================================================================
   设计系统 · 全站唯一的样式源头
   页面里不要写死颜色/间距/圆角，一律从这里取变量。改主题只改这一个文件。
   ========================================================================== */

:root {
    /* ---------- 主色：蓝 ---------- */
    --blue-50: #EEF4FF;
    --blue-100: #DCE8FF;
    --blue-200: #B9D0FF;
    --blue-300: #8AB0FF;
    --blue-400: #5B8DFB;
    --blue-500: #2F6BF0;
    --blue-600: #2456D6;
    --blue-700: #1B44B0;

    --primary: var(--blue-500);
    --primary-hover: var(--blue-600);
    --primary-active: var(--blue-700);
    --primary-soft: var(--blue-50);
    --primary-border: var(--blue-200);

    /* 版本 B（实验组）用紫色区分 */
    --purple-50: #F3EFFF;
    --purple-100: #E6DEFF;
    --purple-500: #7C5CF6;
    --purple-600: #6647E0;

    /* ---------- 中性色 ---------- */
    --gray-50: #F6F8FB;
    --gray-100: #EEF1F5;
    --gray-200: #E1E6EC;
    --gray-300: #CBD3DC;
    --gray-400: #98A4B3;
    --gray-500: #6B7889;
    --gray-600: #4B5563;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* ---------- 语义色 ---------- */
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-500);
    --text-muted: var(--gray-400);
    --text-inverse: #FFFFFF;

    --bg-page: #F3F6FB;
    --bg-surface: #FFFFFF;
    --bg-subtle: var(--gray-50);
    --bg-field: #F5F7FA;

    --border-color: var(--gray-200);
    --border-strong: var(--gray-300);

    --success: #22A45D;
    --success-soft: #E8F7EE;
    --warning: #F59E0B;
    --warning-soft: #FFF4E0;
    --danger: #E5484D;
    --danger-soft: #FDECEC;

    /* ---------- 圆角 ---------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ---------- 阴影 ---------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10);
    --shadow-primary: 0 8px 20px rgba(47, 107, 240, 0.28);

    /* ---------- 间距 ---------- */
    --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;

    /* ---------- 字体 ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-hand: "Ma Shan Zheng", "STXingkai", "华文行楷", "KaiTi", "楷体", var(--font-sans);
    --font-mono: "SFMono-Regular", Consolas, Menlo, monospace;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---------- 层级 ---------- */
    --z-base: 1;
    --z-sticky: 100;
    --z-dropdown: 1000;
    --z-modal: 2000;
    --z-toast: 3000;

    /* ---------- 动效 ---------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration: 0.25s;
}

html { font-size: 16px; }
@media (min-width: 2560px) { html { font-size: 18px; } }
@media (min-width: 3400px) { html { font-size: 22px; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

button, input { font-family: inherit; }