/**
 * Anyway.FM 周报 — 自定义样式（主题、组件、暗色模式与可访问性）
 * 修改视觉风格时主要编辑本文件；布局与工具类仍来自 Tailwind（index.html 内联类名）。
 */

:root {
    --bg-light: #f8f6f5;
    --card-light: #ffffff;
    --text-light: #212121;
    --subtext-light: #5f5f5f;
    --border-light: #eaeaea;

    /* 暗色：正文/次级文字相对 #121212 / #1e1e1e 满足 WCAG AA（正文 ≥4.5:1） */
    --bg-dark: #121212;
    --card-dark: #1e1e1e;
    --text-dark: #f0f0f0;
    --subtext-dark: #cacaca;
    --muted-dark: #b8b8b8;
    --border-dark: #3d3d3d;
}

body {
    background-color: var(--bg-light);
    color: var(--text-light);
}

.dark body {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

.card {
    background-color: var(--card-light);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dark .card {
    background-color: var(--card-dark);
    border: 1px solid var(--border-dark);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.05),
        0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.dark .card:hover {
    border-color: rgba(196, 113, 237, 0.5);
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.bento-item {
    opacity: 0;
}

.gradient-text {
    background: linear-gradient(90deg, rgb(18, 194, 233), rgb(196, 113, 237), rgb(246, 79, 89));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* 暗色：渐变填充逐像素对比度不稳定，改用实色以满足 WCAG 2.1 AA 正文对比度 */
.dark .gradient-text {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--text-dark);
    color: var(--text-dark);
}

.gradient-bg {
    background: linear-gradient(
        90deg,
        rgba(18, 194, 233, 0.1),
        rgba(196, 113, 237, 0.1),
        rgba(246, 79, 89, 0.1)
    );
}

.dark .gradient-bg {
    background: linear-gradient(
        90deg,
        rgba(18, 194, 233, 0.22),
        rgba(196, 113, 237, 0.22),
        rgba(246, 79, 89, 0.22)
    );
}

.dark #prediction-title,
.dark #prediction-icon {
    color: var(--text-dark);
}

.dark #prediction-text,
.dark #prediction-text * {
    color: var(--subtext-dark);
}

/* 主题专区及其他动态注入的文本颜色保底 */
.dark #summary-text,
.dark #themes-container p,
.dark #tao-baby-diary-list,
.dark #ach-envy-list,
.dark #ach-awesome-list,
.dark #ach-congrats-list {
    color: var(--subtext-dark);
}

.dark #report-subtitle,
.dark [id^="stat-"][id$="-label"],
.dark #leaderboard-list .text-gray-500,
.dark #quotes-list .text-gray-500 {
    color: var(--muted-dark);
}

.dark #tao-baby-diary-list .font-bold {
    color: var(--text-dark);
}

.highlight-gradient {
    background-image: linear-gradient(90deg, rgb(18, 194, 233), rgb(196, 113, 237), rgb(246, 79, 89));
}

.icon-bg {
    background: linear-gradient(
        135deg,
        rgba(18, 194, 233, 0.8),
        rgba(196, 113, 237, 0.8),
        rgba(246, 79, 89, 0.8)
    );
    color: white;
}

.quote-bg {
    border-left: 4px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, rgb(18, 194, 233), rgb(196, 113, 237));
    padding-left: 1rem;
}

.rank-badge {
    background: linear-gradient(135deg, #fde047, #facc15, #eab308);
    color: #422006;
}

.rank-badge-2 {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db, #9ca3af);
    color: #1f2937;
}

.rank-badge-3 {
    background: linear-gradient(135deg, #fcd34d, #fbbf24, #d97706);
    color: #431407;
}

.echarts-container {
    width: 100%;
    height: 100%;
    min-height: 200px;
}

/* 周报 JSON 注入的页脚 HTML 内链接 */
.dark #footer-generated a {
    color: #93c5fd;
}

.dark #footer-generated a:hover {
    color: #bfdbfe;
}

/* 词云 JSON 中的 Tailwind 色在深色卡片上偏暗 */
.dark #words-cloud {
    color: var(--subtext-dark);
}

.dark #words-cloud .text-gray-400 {
    color: var(--subtext-dark) !important;
}

.dark #words-cloud .text-blue-500 {
    color: #93c5fd !important;
}