/**
 * CSS变量系统 - 全局变量定义
 * 用于统一管理设计token和响应式断点
 */

:root {
    /* === 响应式断点 === */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 992px;
    --breakpoint-desktop: 1200px;
    
    /* === 手机端专用变量 === */
    --mobile-image-height: 206px;
    --mobile-padding: 20px;
    --mobile-gap: 20px;
    --mobile-header-padding-top: 0px;
    
    /* === 布局变量 === */
    --sidebar-width: 300px;
    --main-max-width: 1440px;
    --layout-gap: 30px;
    
    /* === 颜色变量 === */
    --border-color-light: #EEF2F6;
    --tag-bg-color: #EEF2F7;
    --tag-text-color: #303747;
    --button-border-color: #C9C9C9;
    --text-primary: #111827;
    --text-secondary: #666;
    --background-white: #FFFFFF;
    
    /* === 字体变量 === */
    --font-size-title: 28px;
    --font-size-subtitle: 24px;
    --font-size-body: 16px;
    --font-size-small: 14px;
    --line-height-compact: 1.1;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    
    /* === 间距变量 === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    
    /* === 圆角变量 === */
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    
    /* === 阴影变量 === */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* === 过渡动画 === */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* === 响应式断点媒体查询混合器 === */
/* 这些CSS自定义属性可以在JavaScript中使用 */
:root {
    --media-mobile: "(max-width: 768px)";
    --media-tablet: "(min-width: 769px) and (max-width: 992px)";
    --media-desktop: "(min-width: 993px)";
    --media-large-desktop: "(min-width: 1200px)";
}

/* === 全局重置 - 确保一致性 === */
* {
    box-sizing: border-box;
}

/* === 调试工具（开发环境使用） - 已移除，避免影响用户体验 ===
.debug-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .debug-mobile-only {
        display: none; /* 完全禁用调试样式 */
    }
} */