/**
 * Web3Media 多主题变量
 * 通过 body[data-theme] 切换，由 ui-ux-pro-max 设计系统生成
 */

/* 风格 1：Crypto 暗色 (OLED) - 金色主色 + 深色背景 */
[data-theme="dark"],
:root {
    --color-primary: #F59E0B;
    --color-primary-hover: #FBBF24;
    --color-secondary: #FBBF24;
    --color-cta: #8B5CF6;
    --color-bg: #0F172A;
    --color-bg-card: #1e293b;
    --color-bg-elevated: #334155;
    --color-border: #475569;
    --color-text: #F8FAFC;
    --color-text-muted: #94a3b8;
    --font-heading: 'Orbitron', 'Inter', sans-serif;
    --font-body: 'Exo 2', 'Inter', sans-serif;
}

/* 风格 2：极简亮色 - 青色主色 + 浅底 */
[data-theme="minimal"] {
    --color-primary: #0891B2;
    --color-primary-hover: #0e7490;
    --color-secondary: #22D3EE;
    --color-cta: #22C55E;
    --color-bg: #ECFEFF;
    --color-bg-card: #ffffff;
    --color-bg-elevated: #cffafe;
    --color-border: #a5f3fc;
    --color-text: #164E63;
    --color-text-muted: #0e7490;
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* 风格 3：玻璃拟态 - 深底 + 毛玻璃 + 绿色 CTA */
[data-theme="glass"] {
    --color-primary: #38bdf8;
    --color-primary-hover: #0ea5e9;
    --color-secondary: #1E293B;
    --color-cta: #22C55E;
    --color-bg: #020617;
    --color-bg-card: rgba(30, 41, 59, 0.6);
    --color-bg-elevated: rgba(51, 65, 85, 0.5);
    --color-border: rgba(248, 250, 252, 0.15);
    --color-text: #F8FAFC;
    --color-text-muted: #94a3b8;
    --font-heading: 'Fira Code', 'Inter', monospace;
    --font-body: 'Fira Sans', 'Inter', sans-serif;
    --glass-blur: 12px;
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 玻璃拟态专用：卡片/导航毛玻璃效果 */
[data-theme="glass"] .glass,
[data-theme="glass"] [class*="glass"] {
    background: var(--color-bg-card) !important;
    backdrop-filter: blur(var(--glass-blur, 12px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 12px));
    border: var(--glass-border) !important;
}

/* 全局应用字体与色彩 */
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
}

.font-heading { font-family: var(--font-heading); }

/* 极简主题下文字/边框使用变量 */
[data-theme="minimal"] .text-white,
[data-theme="minimal"] .text-slate-100,
[data-theme="minimal"] .text-slate-200,
[data-theme="minimal"] .text-slate-300 { color: var(--color-text) !important; }
[data-theme="minimal"] .text-slate-400,
[data-theme="minimal"] .text-slate-500 { color: var(--color-text-muted) !important; }
[data-theme="minimal"] .border-slate-700,
[data-theme="minimal"] .border-slate-800 { border-color: var(--color-border) !important; }

/* 风格 4：X (Twitter) 风格 - 纯黑底 + X Blue */
[data-theme="x"] {
    --color-primary: #1D9BF0;
    --color-primary-hover: #1a8cd8;
    --color-secondary: #8ECDF8;
    --color-cta: #1D9BF0;
    --color-bg: #000000;
    --color-bg-card: #16181C;
    --color-bg-elevated: #1D1F23;
    --color-border: #2F3336;
    --color-text: #E7E9EA;
    --color-text-muted: #71767B;
    --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
}

/* X 风格专属：边框和 hover */
[data-theme="x"] .border-slate-700,
[data-theme="x"] .border-slate-800 { border-color: var(--color-border) !important; }
[data-theme="x"] .bg-dark-800,
[data-theme="x"] .bg-slate-800 { background-color: var(--color-bg-card) !important; }
[data-theme="x"] .hover\:text-primary:hover { color: var(--color-primary) !important; }

/* 风格 5：朋克酷炫（Cyberpunk）- 霓虹紫 + 玫红 CTA + 深紫底 */
[data-theme="punk"] {
    --color-primary: #7C3AED;
    --color-primary-hover: #8B5CF6;
    --color-secondary: #A78BFA;
    --color-cta: #F43F5E;
    --color-bg: #0F0F23;
    --color-bg-card: #1a1a2e;
    --color-bg-elevated: #25253d;
    --color-border: #3d3d5c;
    --color-text: #E2E8F0;
    --color-text-muted: #a0aec0;
    --font-heading: 'Russo One', 'Orbitron', sans-serif;
    --font-body: 'Chakra Petch', 'Exo 2', sans-serif;
    --neon-glow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary), 0 0 40px var(--color-secondary);
}

/* 朋克风专属：霓虹发光效果 */
[data-theme="punk"] .text-white,
[data-theme="punk"] h1, [data-theme="punk"] h2, [data-theme="punk"] h3 {
    text-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
}
[data-theme="punk"] .bg-primary,
[data-theme="punk"] button[class*="bg-primary"] {
    box-shadow: 0 0 12px var(--color-primary), 0 0 24px rgba(124, 58, 237, 0.4);
}
[data-theme="punk"] .border-slate-700,
[data-theme="punk"] .border-slate-800 { border-color: var(--color-border) !important; }
[data-theme="punk"] a:hover { text-shadow: 0 0 12px var(--color-cta); }

/* 主题切换按钮：当前主题高亮 */
[data-theme="dark"] .theme-btn-dark { background: var(--color-primary); color: #0f172a !important; }
[data-theme="minimal"] .theme-btn-minimal { background: var(--color-primary); color: #fff !important; }
[data-theme="glass"] .theme-btn-glass { background: var(--color-cta); color: #fff !important; }
[data-theme="x"] .theme-btn-x { background: var(--color-primary); color: #fff !important; }
[data-theme="punk"] .theme-btn-punk { background: linear-gradient(135deg, #7C3AED, #F43F5E); color: #fff !important; box-shadow: 0 0 8px #7C3AED; }

/* ============ 骨架屏加载动画 ============ */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--color-bg-card) 25%, var(--color-bg-elevated) 50%, var(--color-bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 0.5rem;
}
.skeleton-text { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-text-sm { height: 0.75rem; margin-bottom: 0.375rem; }
.skeleton-img { height: 12rem; width: 100%; }
.skeleton-avatar { height: 3rem; width: 3rem; border-radius: 9999px; }
.skeleton-card { height: 10rem; width: 100%; }
.skeleton-row { height: 3rem; width: 100%; margin-bottom: 0.5rem; }

/* Loading spinner */
.loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-bg-elevated);
    border-top-color: var(--color-primary);
    border-radius: 9999px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade in animation for loaded content */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}