/**
 * i9k导航 - 活力橘色主题
 * Theme: Vibrant Orange
 * Author: UI Designer
 * Version: 1.0
 */

/* ==================== 颜色系统 Color System ==================== */

:root {
    /* 主色调 - 活力橘色系 */
    --primary-color: #ff7f50;
    --primary-light: #ff8c69;
    --primary-dark: #ff6347;
    --primary-lighter: #ffa07a;
    --primary-darker: #e6553c;

    /* 辅助色 */
    --secondary-color: #4a90e2;
    --accent-color: #ff8c00;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;

    /* 中性色 - 纯白背景 */
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #fff5f0;
    --bg-active: #ffe8df;

    /* 边框颜色 */
    --border-color: #ffd4c4;
    --border-light: #ffe8df;
    --border-dark: #ffc4ad;
    --border-hover: #ffb89c;

    /* 文本颜色 */
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --text-light: #95a5a6;
    --text-muted: #adb5bd;
    --text-white: #ffffff;

    /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(255, 127, 80, 0.08);
    --shadow-md: 0 4px 8px rgba(255, 127, 80, 0.12);
    --shadow-lg: 0 8px 16px rgba(255, 127, 80, 0.15);
    --shadow-hover: 0 3px 10px rgba(255, 127, 80, 0.15);

    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, #ff7f50, #ff8c69);
    --gradient-card-head: linear-gradient(to right, #ffffff, #ffffff);
    --gradient-button: linear-gradient(135deg, #ff7f50 0%, #ff8c69 100%);
    --gradient-badge: linear-gradient(135deg, #ff7f50, #ff6347);

    /* 间距规范 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;

    /* 圆角规范 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-round: 50%;

    /* 过渡时间 */
    --transition-fast: 0.15s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
}

/* ==================== 全局应用 Global Styles ==================== */

/* 背景色应用 */
body {
    background: var(--bg-primary);
}

/* 链接颜色 */
a:hover {
    color: var(--primary-color);
}

/* 文本选中颜色 */
::-moz-selection {
    background: var(--primary-color);
    color: var(--text-white);
}

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

/* 滚动条颜色 */
::-webkit-scrollbar-thumb {
    background: var(--primary-light);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* ==================== 组件样式 Component Styles ==================== */

/* 按钮 */
.btn-primary,
.search-btn {
    background: var(--gradient-button) !important;
    border: none;
    transition: all var(--transition-normal);
}

.btn-primary:hover,
.search-btn:hover {
    background: var(--gradient-primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

/* 卡片 */
.card {
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card .card-head {
    background: var(--gradient-card-head) !important;
    border-bottom-color: var(--border-light) !important;
}

/* 导航 */
.nav li::after {
    background: var(--primary-color);
}

.nav li a:hover,
.nav li a.active {
    color: var(--primary-color);
}

@media (max-width: 767px) {

    .nav li a:hover,
    .nav li a.active {
        background: var(--primary-color) !important;
        box-shadow: 0 0 8px var(--primary-color) !important;
    }
}

/* 分类侧边栏 */
.category li a:hover,
.category li a.active {
    background: var(--primary-color);
}

/* VIP徽章 */
.vip-badge {
    background: var(--gradient-badge) !important;
}

/* 主内容区分隔线 */
.main::after {
    background: linear-gradient(to bottom, transparent, var(--primary-color), transparent);
    box-shadow: 0 0 8px rgba(255, 127, 80, 0.5);
}

/* 卡片标题动画 */
@keyframes card-head-shine {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.card .card-head::after {
    background: linear-gradient(to right, transparent, rgba(255, 127, 80, 0.1), transparent);
}

/* ==================== 特定模块样式 ==================== */

/* 热门链接/文章视图 */
.side .view-list a .view {
    color: var(--primary-color);
}

/* 排行榜日期/数字 */
.side-latest .date {
    color: var(--primary-color) !important;
}

/* 悬停效果 */
.side-latest .latest-item:hover,
.quick-site-item:hover,
.top-grid .item:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--border-hover) !important;
}

.side-latest .latest-item:hover .name,
.quick-site-item:hover .name,
.top-grid .item:hover .name {
    color: var(--primary-color) !important;
}

/* 友情链接 */
.card.links a {
    background-color: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

.card.links a:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--primary-color) !important;
}

/* 呼吸灯动画 - 橘色系 */
@keyframes breathe {
    0% {
        color: var(--primary-color);
    }

    25% {
        color: var(--accent-color);
    }

    50% {
        color: #ff9966;
    }

    75% {
        color: var(--primary-light);
    }

    100% {
        color: var(--primary-color);
    }
}

/* VIP徽章呼吸灯 - 橘色系 */
@keyframes badge-breathe {
    0% {
        background: linear-gradient(135deg, #ff7f50, #ff6347);
    }

    50% {
        background: linear-gradient(135deg, #ff8c69, #ff7f50);
    }

    100% {
        background: linear-gradient(135deg, #ff7f50, #ff6347);
    }
}

/* ==================== 搜索框样式 ==================== */

.search-type li:hover,
.search-type li.active {
    background: rgba(255, 127, 80, 0.15);
}

.search-main .search-input:focus {
    border: 2px solid var(--primary-light);
    outline: none;
}

.search-main .search-btn {
    background: var(--gradient-button);
}

/* ==================== 公告板样式 ==================== */

.board {
    border-left: 3px solid var(--primary-color) !important;
}

/* ==================== 响应式优化 ==================== */

@media (max-width: 991px) {
    :root {
        --spacing-sm: 5px;
        --spacing-md: 10px;
        --spacing-lg: 12px;
    }
}

@media (max-width: 767px) {
    :root {
        --spacing-xs: 3px;
        --spacing-sm: 5px;
        --spacing-md: 8px;
        --spacing-lg: 10px;
    }
}

/* ==================== 可访问性优化 ==================== */

/* 确保足够的颜色对比度 */
.text-orange {
    color: var(--primary-dark);
    /* 更深的橘色以提高对比度 */
}

/* 焦点状态 */
a:focus,
button:focus,
input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 禁用状态 */
.disabled,
[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-active) !important;
    color: var(--text-muted) !important;
}