/**
 * 日间/夜间模式系统
 * 
 * Hurricane Movie Platform v3.0
 * 支持平滑切换，用户偏好持久化
 */

/* ========================================
   CSS变量定义
   ======================================== */

/* 日间模式（默认） */
body[data-theme-mode="light"],
body:not([data-theme-mode]) {
    /* 背景色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-card: #ffffff;
    --bg-hover: #f1f3f5;
    
    /* 文字色 */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-tertiary: #6c757d;
    --text-muted: #adb5bd;
    
    /* 链接色 */
    --link-color: #667eea;
    --link-hover: #5568d3;
    
    /* 边框色 */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #ced4da;
    
    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* 品牌色（保持不变） */
    --accent-primary: #667eea;
    --accent-secondary: #764ba2;
    --accent-success: #51cf66;
    --accent-warning: #ffd43b;
    --accent-danger: #ff6b6b;
    --accent-info: #4dabf7;
    
    /* 覆盖层 */
    --overlay-light: rgba(255, 255, 255, 0.9);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    
    /* 输入框 */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus: #667eea;
}

/* 夜间模式 */
body[data-theme-mode="dark"] {
    /* 背景色 */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #333333;
    --bg-card: #242424;
    --bg-hover: #2e2e2e;
    
    /* 文字色 */
    --text-primary: #e9ecef;
    --text-secondary: #ced4da;
    --text-tertiary: #adb5bd;
    --text-muted: #6c757d;
    
    /* 链接色 */
    --link-color: #8b9eff;
    --link-hover: #a8b4ff;
    
    /* 边框色 */
    --border-color: #3a3a3a;
    --border-light: #2e2e2e;
    --border-dark: #4a4a4a;
    
    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    
    /* 品牌色（夜间版本，稍微亮一点） */
    --accent-primary: #8b9eff;
    --accent-secondary: #9d7dc0;
    --accent-success: #69db7c;
    --accent-warning: #ffe066;
    --accent-danger: #ff8787;
    --accent-info: #66d9ef;
    
    /* 覆盖层 */
    --overlay-light: rgba(26, 26, 26, 0.9);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    
    /* 输入框 */
    --input-bg: #2a2a2a;
    --input-border: #3a3a3a;
    --input-focus: #8b9eff;
}

/* ========================================
   基础元素适配
   ======================================== */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 卡片和容器 */
.card,
.widget,
.content-card,
.movie-card,
.article-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card:hover,
.content-card:hover,
.movie-card:hover {
    background-color: var(--bg-hover);
}

/* 文字元素 */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
}

small,
.text-muted {
    color: var(--text-muted);
}

/* 链接 */
a {
    color: var(--link-color);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover);
}

/* 边框 */
hr,
.divider {
    border-color: var(--border-color);
}

/* ========================================
   导航栏适配
   ======================================== */

.site-header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.main-navigation a {
    color: var(--text-primary);
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
    color: var(--accent-primary);
}

/* ========================================
   模式切换按钮
   ======================================== */

.theme-mode-toggle {
    position: relative;
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.theme-mode-toggle:hover {
    transform: scale(1.1);
}

.theme-mode-toggle .mode-icon {
    position: absolute;
    font-size: 24px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 日间模式显示太阳 */
body[data-theme-mode="light"] .theme-mode-toggle .sun-icon,
body:not([data-theme-mode]) .theme-mode-toggle .sun-icon {
    opacity: 1;
    transform: rotate(0deg);
}

body[data-theme-mode="light"] .theme-mode-toggle .moon-icon,
body:not([data-theme-mode]) .theme-mode-toggle .moon-icon {
    opacity: 0;
    transform: rotate(180deg);
}

/* 夜间模式显示月亮 */
body[data-theme-mode="dark"] .theme-mode-toggle .sun-icon {
    opacity: 0;
    transform: rotate(-180deg);
}

body[data-theme-mode="dark"] .theme-mode-toggle .moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}

/* ========================================
   表单元素适配
   ======================================== */

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus);
    outline-color: var(--input-focus);
}

/* ========================================
   按钮适配
   ======================================== */

.button,
.btn,
button[type="submit"] {
    background-color: var(--accent-primary);
    color: #ffffff;
    border: none;
}

.button:hover,
.btn:hover {
    background-color: var(--accent-secondary);
}

.button-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ========================================
   内容区域适配
   ======================================== */

.site-content {
    background-color: var(--bg-secondary);
}

article {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

blockquote {
    background-color: var(--bg-secondary);
    border-left-color: var(--accent-primary);
    color: var(--text-secondary);
}

code {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
}

pre {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* ========================================
   页脚适配
   ======================================== */

.site-footer {
    background-color: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.site-footer a {
    color: var(--text-primary);
}

.site-footer a:hover {
    color: var(--accent-primary);
}

/* ========================================
   特殊组件适配
   ======================================== */

/* 搜索框 */
.search-form input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

/* 分页 */
.pagination {
    background-color: var(--bg-card);
}

.pagination a,
.pagination span {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.pagination a:hover,
.pagination .current {
    background-color: var(--accent-primary);
    color: #ffffff;
}

/* 侧边栏 */
.sidebar .widget {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.widget-title {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* 标签云 */
.tag-cloud-link {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.tag-cloud-link:hover {
    background-color: var(--accent-primary);
    color: #ffffff;
}

/* ========================================
   图片和媒体适配
   ======================================== */

/* 夜间模式图片降低亮度 */
body[data-theme-mode="dark"] img {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

body[data-theme-mode="dark"] img:hover {
    opacity: 1;
}

/* ========================================
   响应式适配
   ======================================== */

@media (max-width: 768px) {
    .theme-mode-toggle {
        width: 40px;
        height: 40px;
    }
    
    .theme-mode-toggle .mode-icon {
        font-size: 20px;
    }
}

/* ========================================
   打印样式（强制日间模式）
   ======================================== */

@media print {
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}

/* ========================================
   平滑过渡动画
   ======================================== */

body,
.card,
.widget,
article,
.site-header,
.site-footer,
a,
button {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ========================================
   标签和徽章强制白色文字
   ======================================== */

/* 确保所有带渐变背景的标签都是白色文字 */
.content-card-badge,
.hero-content-card-category,
.article-category,
.editor-pick-badge,
.article-featured-badge {
    color: #ffffff !important;
}

/* 链接形式的标签也强制白色 */
a.content-card-badge,
a.hero-content-card-category,
a.article-category {
    color: #ffffff !important;
}

/* 悬停状态也保持白色 */
.content-card-badge:hover,
.hero-content-card-category:hover,
.article-category:hover,
a.content-card-badge:hover,
a.hero-content-card-category:hover,
a.article-category:hover {
    color: #ffffff !important;
}

/* 按钮链接强制白色 */
.hero-content-card-link,
.channel-link,
a.hero-content-card-link,
a.channel-link {
    color: #ffffff !important;
}

.hero-content-card-link:hover,
.channel-link:hover,
a.hero-content-card-link:hover,
a.channel-link:hover {
    color: #ffffff !important;
}

/* ========================================
   辅助类
   ======================================== */

/* 仅日间模式显示 */
.light-only {
    display: block;
}

body[data-theme-mode="dark"] .light-only {
    display: none;
}

/* 仅夜间模式显示 */
.dark-only {
    display: none;
}

body[data-theme-mode="dark"] .dark-only {
    display: block;
}

/* 模式标识 */
.mode-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

body[data-theme-mode="light"] .mode-badge {
    background-color: #fff3cd;
    color: #856404;
}

body[data-theme-mode="dark"] .mode-badge {
    background-color: #3a3a3a;
    color: #8b9eff;
}