/**
 * 主题颜色变量定义
 * 支持浅色、深色、自动模式
 */

/* 默认（浅色）主题变量 */
:root {
    /* 背景色 */
    --bg-body: #F1F5F9; /* 网站大背景 */
    --bg-primary: #F1F5F9;
    --bg-secondary: #f8f9fa;
     --bg-tertiary: #e9ecef;
    --bg-glass: rgba(255, 255, 255, 0.25);
    --bg-glass-light: rgba(255, 255, 255, 0.15);
    --bg-glass-hover: rgba(255, 255, 255, 0.35);
    --bg-glass-strong: rgba(255, 255, 255, 0.45);
    
    /* 文字颜色 */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-inverse: #ffffff;
    
    /* 边框颜色 */
    --border-primary: #dee2e6;
    --border-secondary: #e9ecef;
    --border-glass: rgba(0, 0, 0, 0.1);
    
    /* 阴影 */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 1.5rem rgba(0, 0, 0, 0.175);
    
    /* 卡片相关 */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* 链接颜色 */
    --link-color: #0d6efd;
    --link-hover: #0a58ca;
    
    /* 主题色（蓝色系） */
    --theme-primary: #2A5FF5;
    --theme-primary-light: rgba(42, 95, 245, 0.1);
    --theme-primary-medium: rgba(42, 95, 245, 0.2);
    --theme-primary-strong: rgba(42, 95, 245, 0.3);
    --theme-gradient: linear-gradient(90deg, #2A5FF5, #1E47CC, #1939B7);
    --theme-gradient-detailed: linear-gradient(90deg, #2A5FF5, #1E47CC, #1939B7, #142EA1);
    --theme-gradient-card: linear-gradient(135deg, rgba(42, 95, 245, 0.1) 0%, rgba(30, 71, 204, 0.1) 100%);
    
    /* 输入框 */
    --input-bg: rgba(0, 0, 0, 0.05);
    --input-border: rgba(0, 0, 0, 0.1);
    --input-focus-bg: rgba(0, 0, 0, 0.1);
    --input-placeholder: rgba(0, 0, 0, 0.5);
    
    /* 文字阴影 */
    --text-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.3);
    --text-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.3);
    --text-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.5);
    
    /* 滤镜阴影 */
    --filter-shadow-light: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    --filter-shadow-medium: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* 深色主题变量 */
.theme-dark,
.theme-auto.system-dark {
    /* 背景色 */
    --bg-body: #161522; /* 深色模式网站大背景 */
    --bg-primary: #262533;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2d2d2d;
    --bg-glass: rgba(255, 255, 255, 0.05);
    --bg-glass-light: rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.08);
    --bg-glass-strong: rgba(255, 255, 255, 0.12);
    
    /* 文字颜色 */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --text-inverse: #000000;
    
    /* 边框颜色 */
    --border-primary: #404040;
    --border-secondary: #2d2d2d;
    --border-glass: rgba(255, 255, 255, 0.1);
    
    /* 阴影 */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    
    /* 卡片相关 */
    --card-bg: #2d2d2d;
    --card-border: #404040;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    
    /* 链接颜色 */
    --link-color: #4dabf7;
    --link-hover: #339af0;
    
    /* 主题色（蓝色系 - 深色模式适配） */
    --theme-primary: #2A5FF5;
    --theme-primary-light: rgba(42, 95, 245, 0.15);
    --theme-primary-medium: rgba(42, 95, 245, 0.25);
    --theme-primary-strong: rgba(42, 95, 245, 0.35);
    --theme-gradient: linear-gradient(90deg, #4dabf7, #339af0, #228be6);
    --theme-gradient-detailed: linear-gradient(90deg, #4dabf7, #339af0, #228be6, #1c7ed6);
    --theme-gradient-card: linear-gradient(135deg, rgba(77, 171, 247, 0.15) 0%, rgba(51, 154, 240, 0.15) 100%);
    
    /* 输入框 */
    --input-bg: rgba(255, 255, 255, 0.1);
    --input-border: rgba(255, 255, 255, 0.2);
    --input-focus-bg: rgba(255, 255, 255, 0.2);
    --input-placeholder: rgba(255, 255, 255, 0.7);
    
    /* 文字阴影 */
    --text-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.5);
    --text-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.5);
    --text-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.7);
    
    /* 滤镜阴影 */
    --filter-shadow-light: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    --filter-shadow-medium: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

/* 浅色主题变量（显式定义） */
.theme-light,
.theme-auto.system-light {
    /* 背景色 */
    --bg-body: #F1F5F9; /* 浅色模式网站大背景 */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-glass: rgba(255, 255, 255, 0.4);
    --bg-glass-light: rgba(255, 255, 255, 0.25);
    --bg-glass-hover: rgba(255, 255, 255, 0.5);
    --bg-glass-strong: rgba(255, 255, 255, 0.6);
    
    /* 文字颜色 */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-inverse: #ffffff;
    
    /* 边框颜色 */
    --border-primary: #dee2e6;
    --border-secondary: #e9ecef;
    --border-glass: rgba(0, 0, 0, 0.1);
    
    /* 阴影 */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    
    /* 卡片相关 */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* 链接颜色 */
    --link-color: #0d6efd;
    --link-hover: #0a58ca;
    
    /* 主题色（蓝色系） */
    --theme-primary: #2A5FF5;
    --theme-primary-light: rgba(42, 95, 245, 0.1);
    --theme-primary-medium: rgba(42, 95, 245, 0.2);
    --theme-primary-strong: rgba(42, 95, 245, 0.3);
    --theme-gradient: linear-gradient(90deg, #2A5FF5, #1E47CC, #1939B7);
    --theme-gradient-detailed: linear-gradient(90deg, #2A5FF5, #1E47CC, #1939B7, #142EA1);
    --theme-gradient-card: linear-gradient(135deg, rgba(42, 95, 245, 0.1) 0%, rgba(30, 71, 204, 0.1) 100%);
    
    /* 输入框 */
    --input-bg: rgba(0, 0, 0, 0.05);
    --input-border: rgba(0, 0, 0, 0.1);
    --input-focus-bg: rgba(0, 0, 0, 0.1);
    --input-placeholder: rgba(0, 0, 0, 0.5);
    
    /* 文字阴影 */
    --text-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.3);
    --text-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.3);
    --text-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.5);
    
    /* 滤镜阴影 */
    --filter-shadow-light: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    --filter-shadow-medium: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* 主题切换过渡动画 - 只对需要的元素应用 */
body,
.main-layout,
.content-area,
.main-content,
.footer-area,
.widget,
.card-link,
.link-card,
.btn,
.button,
input,
textarea,
select,
.nav-menu a,
.category-link,
.sidebar-menu-link,
.popular-link,
.floating-btn,
.modal-content,
.search-field,
.theme-toggle,
.sidebar-toggle,
.submit-url-toggle,
.breadcrumb-link,
.ranking-card,
.ad-component {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 头部区域和侧边栏特殊处理 - 禁用边框过渡以避免闪现 */
.header-area,
.sidebar-left,
.sidebar-right {
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* 禁用某些元素的过渡动画以避免闪烁 */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* ==========================================
   GLOBAL KEYFRAME ANIMATIONS
   全局关键帧动画定义
   ========================================== */

/* 通用旋转动画 - 用于加载指示器 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 通用脉冲动画 - 用于加载状态 */
@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* 优化的shimmer动画 - 使用transform替代background-position */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 简化的淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 简化的滑入动画 */
@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}