/* ==========================================================================
   设计系统 · 全站唯一的样式源头
   --------------------------------------------------------------------------
   所有页面的颜色、间距、圆角、阴影、字号都从这里取，不要在页面里写死数值。
   改主题只改这一个文件。
   ========================================================================== */

:root {
    /* ---------- 品牌色 ---------- */
    --brand-blue: #1677E0;          /* LOGO 蓝，用于标识，不做交互色 */
    --brand-blue-light: #3B9EFF;
    --brand-blue-dark: #0B5BC4;

    /* ---------- 主色：绿（交互主色）---------- */
    --green-50: #F0FAF3;
    --green-100: #DCF3E3;
    --green-200: #B6E5C6;
    --green-300: #7FD3A0;
    --green-400: #4CBF78;
    --green-500: #2FAE58;           /* 主按钮 */
    --green-600: #229347;
    --green-700: #1B7A3A;           /* 手写标题深绿 */
    --green-800: #145C2C;

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

    /* ---------- 中性色 ---------- */
    --gray-50: #F7F9FA;
    --gray-100: #EFF2F4;
    --gray-200: #E3E8EB;
    --gray-300: #CDD5DA;
    --gray-400: #9AA6AE;
    --gray-500: #6B7880;
    --gray-600: #4A555C;
    --gray-700: #333C42;
    --gray-800: #1F272C;
    --gray-900: #121719;

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

    --bg-page: var(--gray-50);
    --bg-surface: #FFFFFF;
    --bg-subtle: var(--gray-100);
    --bg-field: #F4F7F8;            /* 输入框底色 */

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

    --success: #2FAE58;
    --warning: #E6A23C;
    --danger: #E45B5B;
    --info: #3B9EFF;

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

    /* ---------- 阴影 ---------- */
    --shadow-xs: 0 1px 2px rgba(18, 23, 25, 0.04);
    --shadow-sm: 0 2px 8px rgba(18, 23, 25, 0.06);
    --shadow-md: 0 6px 20px rgba(18, 23, 25, 0.08);
    --shadow-lg: 0 16px 40px rgba(18, 23, 25, 0.10);
    --shadow-xl: 0 24px 64px rgba(18, 23, 25, 0.14);
    --shadow-primary: 0 8px 20px rgba(47, 174, 88, 0.28);

    /* ---------- 间距（4 的倍数）---------- */
    --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;
    --space-20: 80px;

    /* ---------- 字体 ---------- */
    --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, "Liberation Mono", 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;
    --duration-slow: 0.4s;
}

/* ==========================================================================
   1K → 4K 响应式基准
   --------------------------------------------------------------------------
   全站字号/间距用 rem，靠调根字号整体缩放，比逐个元素写断点可靠得多。
   注意 4K 屏多数开了系统缩放（150%/200%），实际 CSS 视口仍是 1920~2560，
   所以断点按 CSS 像素设，不是按物理分辨率。
   ========================================================================== */

html {
    font-size: 16px;                /* 基准：1080p / 已缩放的 4K */
}

@media (min-width: 1920px) {        /* 2K 无缩放 */
    html { font-size: 17px; }
}

@media (min-width: 2560px) {        /* 2.5K / 4K 无缩放 */
    html { font-size: 20px; }
}

@media (min-width: 3400px) {        /* 真 4K 无缩放 */
    html { font-size: 24px; }
}

/* 降低动效，尊重系统偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !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;
}