/**
 * ============================================
 * CSS Custom Properties - Theme Variables
 * 主题变量系统 - 符合 W3C 国际标准
 * ============================================
 * 用途: 统一管理全站颜色、间距、字体等设计令牌
 * 标准: CSS Custom Properties Level 1 (W3C)
 * ============================================
 */

:root {
    /* ===== 设计基础 ===== */
    --html-body-size: 65%;
    --base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
                        "PingFang SC", "Microsoft YaHei", "Helvetica Neue", 
                        Helvetica, Arial, sans-serif;
    --base-line-height: 1.6;
    --base-border-radius: 0.2rem;
    --base-transition-duration: 0.2s;
    --base-transition-easing: ease;

    /* ===== 主色系 - 品牌色 ===== */
    --color-primary: #e22c08;
    --color-primary-hover: #d02907;
    --color-primary-active: #c02606;
    --color-primary-light: rgba(226, 44, 8, 0.1);
    --color-primary-lighter: rgba(226, 44, 8, 0.05);

    /* ===== 辅助色 ===== */
    --color-secondary: #0c7ce4;
    --color-secondary-hover: #0b6fd0;
    --color-success: #07a160;
    --color-success-hover: #069155;
    --color-warning: #fa9d3b;
    --color-warning-hover: #e68e35;
    --color-danger: #e22c08;
    --color-info: #10aeff;
    --color-info-hover: #0e9ae0;

    /* ===== 中性色 ===== */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-text-placeholder: #cccccc;
    --color-border: #eeeeee;
    --color-border-dark: #dddddd;
    --color-background: #f5f5f5;
    --color-background-dark: #e8e8e8;
    --color-background-light: #fafafa;

    /* ===== 页面背景 ===== */
    --body-bg-color: #f5f5f5;
    --header-bg-color: #ffffff;
    --footer-bg-color: #333333;

    /* ===== 字体大小梯度 ===== */
    --font-size-xs: 1rem;
    --font-size-sm: 1.2rem;
    --font-size-md: 1.4rem;
    --font-size-lg: 1.6rem;
    --font-size-xl: 1.8rem;
    --font-size-xxl: 2rem;
    --font-size-xxxl: 2.4rem;

    /* ===== 间距梯度 (基于 8px 网格) ===== */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    /* ===== 阴影 ===== */
    --shadow-sm: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.08);
    --shadow-md: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.2);

    /* ===== 过渡动画 ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ===== Z-Index 层级 ===== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;

    /* ===== 布局 ===== */
    --container-max-width: 120rem;
    --header-height: 18rem;
    --footer-min-height: 20rem;

    /* ===== 表单 ===== */
    --input-height: 3.2rem;
    --input-padding-h: 1rem;
    --input-border-color: var(--color-border-dark);
    --input-border-focus: var(--color-primary);
    --input-bg-disabled: #f9f9f9;
}

/* ===== 暗色主题（预留） ===== */
@media (prefers-color-scheme: dark) {
    /*
    :root[data-theme="dark"] {
        --color-text-primary: #e0e0e0;
        --color-text-secondary: #b0b0b0;
        --body-bg-color: #1a1a1a;
    }
    */
}

/* ===== 响应式 REM 调整 ===== */
@media screen and (max-width: 1024px) {
    :root {
        --html-body-size: 55%;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --html-body-size: 50%;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --html-body-size: 45%;
    }
}