/* CSS变量定义 - 响应式布局 */
:root {
    /* 不同屏幕尺寸下的左右边距 */
    --screen-padding-2k: 520px; /* 2560x1440及以上 */

    --screen-padding-2560: 520px; /* 2560 */

    --screen-padding-2100: 400px; /* 2100及以上 */
    
    --screen-padding-1920: 500px; /* 1920x1080 */
    
    --screen-padding-1680: 250px; /* 1680x1050 */
    
    --screen-padding-1600: 200px; /* 1600x1024 */
    
    --screen-padding-1440: 150px; /* 1440x900 */
    
    --screen-padding-1366: 80px; /* 1366x768 */
    
    --screen-padding-1280: 50px; /* 1280x800 */
    
    --screen-padding-1024: 30px; /* 1024x768 */
    
    --screen-padding-mobile: 20px; /* 移动端 */
    

    /* 不同屏幕尺寸下的字体大小 - PC端 */
    --font-size-2k: 22px; /* 2560x1440及以上 - 大屏幕可以稍大 */

    --font-size-2560: 22px; /* 2560 */
    
    --font-size-2100: 21px; /* 2100 */

    --font-size-1920: 20px; /* 1920x1080 */
    
    --font-size-1680: 18px; /* 1680x1050 */
    
    --font-size-1600: 17px; /* 1600x1024 */
    
    --font-size-1440: 16px; /* 1440x900 */
    
    --font-size-1366: 15px; /* 1366x768 */
    
    --font-size-1280: 14px; /* 1280x800 */
    
    --font-size-1024: 14px; /* 1024x768 */
    
    --font-size-mobile: 16px; /* 移动端基础字体 */
    
    --font-size-mobile-small: 14px; /* 移动端小字体 */
    

    /* 导航栏字体大小 - 根据不同屏幕调整 */
    --nav-font-size-2k: var(--font-size-2k);
    --nav-font-size-2560: var(--font-size-2560);
    --nav-font-size-2100: var(--font-size-2100);
    --nav-font-size-1920: var(--font-size-1920);
    --nav-font-size-1680: var(--font-size-1680);
    --nav-font-size-1600: var(--font-size-1600);
    --nav-font-size-1440: var(--font-size-1440);
    --nav-font-size-1366: var(--font-size-1366);
    --nav-font-size-1280: var(--font-size-1280);
    --nav-font-size-1024: var(--font-size-1024);

    /* 通用字体大小变量 - 保持向后兼容 */
    --font-size-large: 22px;
    /* 大屏幕字体 */
    --font-size-medium: 16px;
    /* 中等屏幕字体 */
    --font-size-small: 14px;
    /* 小屏幕字体 */

    /* 导航栏高度 */
    --main-header-1280: 85px;
    --main-header-1024: 70px;
    --main-header-768: 60px;
    --main-header-480: 55px;
    --main-header-lt-480: 50px;

    /* 颜色定义 - 默认浅色主题 */
    --primary-color: #4271EB;
    --primary-hover: #2c5cdc;
    --primary-light: rgba(66, 113, 235, 0.1);
    --primary-glow: rgba(66, 113, 235, 0.2);
    --text-color: #333333;
    --text-light: #666666;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-glass: rgba(255, 255, 255, 0.98);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --border-color: #e8e8e8;
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(66, 113, 235, 0.3);

    /* 导航栏背景色 - 默认浅色 */
    --nav-bg-color: var(--bg-glass);
    --nav-text-color: var(--text-color);
    --nav-hover-color: var(--primary-color);

    /* 深色主题变量 - 当需要蓝色背景时使用 */
    --nav-bg-color-dark: #4271EB;
    --nav-text-color-dark: #ffffff;
    --nav-hover-color-dark: rgba(255, 255, 255, 0.9);
    --nav-shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.25);
    --nav-border-dark: rgba(255, 255, 255, 0.1);

    /* 动画时间 */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

    /* 高级动画效果 */
    --ease-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 深色导航栏主题类 */
.nav-theme-dark {
    /* 使用深色主题变量 */
    --nav-bg-color: var(--nav-bg-color-dark);
    --nav-text-color: var(--nav-text-color-dark);
    --nav-hover-color: var(--nav-hover-color-dark);
    --bg-glass: rgba(66, 113, 235, 0.98);
    --shadow-light: var(--nav-shadow-dark);
    --border-color: var(--nav-border-dark);
}