/* 
 * golbal-crtl.css
 * 定义全局CSS变量，包括颜色、背景、边框、动画等。
 * 此文件为整个项目提供一致的设计系统基础。
 */

:root {
    /* 高端质感配色 - 更精细的层次控制 */
    --primary-color: #1d1d1f;
    --secondary-color: #2c2c2e;
    --tertiary-color: #48484a;
    --accent-color: #007aff;
    --accent-secondary: #5856d6;
    --accent-light: rgba(0, 122, 255, 0.1);
    --success-color: #30d158;
    --warning-color: #ff9f0a;
    --error-color: #ff453a;

    /* 背景色 - 更丰富的质感层次 */
    --background: linear-gradient(135deg, #fafafa 0%, #f5f5f7 50%, #f0f0f3 100%);
    --background-secondary: linear-gradient(145deg, #f8f8fa 0%, #f2f2f7 100%);
    --background-tertiary: #e5e5ea;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-bg-hover: rgba(255, 255, 255, 0.95);
    --card-bg-active: rgba(255, 255, 255, 1);

    /* 文字颜色 - 更精细的对比度控制 */
    --text-primary: #1d1d1f;
    --text-secondary: #6d6d70;
    --text-tertiary: #8e8e93;
    --text-quaternary: #aeaeb2;
    --text-placeholder: #c7c7cc;
    --text-inverse: #ffffff;
    --text-accent: var(--accent-color);

    /* 边框颜色 - 更精细的分割线 */
    --border-color: rgba(60, 60, 67, 0.12);
    --border-light: rgba(60, 60, 67, 0.06);
    --border-medium: rgba(60, 60, 67, 0.18);
    --border-strong: rgba(60, 60, 67, 0.24);
    --border-accent: rgba(0, 122, 255, 0.3);

    /* 交互状态 - 更自然的反馈 */
    --hover-bg: rgba(0, 0, 0, 0.04);
    --active-bg: rgba(0, 0, 0, 0.08);
    --hover-accent: rgba(0, 122, 255, 0.06);
    --active-accent: rgba(0, 122, 255, 0.12);
    --focus-ring: rgba(0, 122, 255, 0.25);
    --selection-bg: rgba(0, 122, 255, 0.15);

    /* 阴影效果 - 更真实的深度感 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* 毛玻璃效果 - 更真实的材质感 */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-strong: rgba(255, 255, 255, 0.85);
    --glass-bg-ultra: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-backdrop: blur(20px) saturate(180%);
    --glass-backdrop-strong: blur(40px) saturate(200%);

    /* 渐变效果 - 更丰富的质感层次 */
    --gradient-primary: linear-gradient(135deg, rgba(29, 29, 31, 0.95) 0%, rgba(44, 44, 46, 0.9) 50%, rgba(72, 72, 74, 0.85) 100%);
    --gradient-accent: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
    --gradient-accent-soft: linear-gradient(135deg, rgba(0, 122, 255, 0.8) 0%, rgba(88, 86, 214, 0.8) 100%);
    --gradient-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 252, 0.8) 100%);
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 248, 250, 0.75) 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.06) 100%);
    --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基础样式重置和优化 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 优化body样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1;
    /* 优化滚动体验 */
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* 全局选择样式 */
::selection {
    background: var(--selection-bg);
    color: var(--text-primary);
}

::-moz-selection {
    background: var(--selection-bg);
    color: var(--text-primary);
}

/* 全局焦点样式 */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 隐藏滚动条但保持功能 */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* 自定义滚动条样式 */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

.custom-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}

/* 淡入动画 - 使用公共动画库 */