/* ===================================================================
   AI-News-Radar - Base Layer
   ───────────────────────────────────────────────────────────────────
   · 设计令牌 (Design Tokens)
   · CSS 重置
   · 排版系统
   · 动画定义
   =================================================================== */

/* ────────────── 设计令牌（亮色模式） ────────────── */
:root {
    /* 基础结构 */
    --bg: #f8fafc;
    --bg-secondary: #f1f5f9;
    --panel: rgba(255, 255, 255, 0.8);
    --panel-solid: #ffffff;

    /* 文本系统 */
    --ink: #0f172a;
    --ink-secondary: #334155;
    --muted: #64748b;
    --subtle: #94a3b8;

    /* 边框与分割线 */
    --line: #e2e8f0;
    --line-strong: #cbd5e1;

    /* 强调色系 */
    --accent: #0f172a;
    --accent-soft: #f1f5f9;
    --accent-blue: #3b82f6;
    --accent-twitter: #1d9bf0;

    /* 组件底色 */
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-hover: rgba(255, 255, 255, 1);
    --card-twitter: rgba(255, 255, 255, 0.95);

    /* NEW 标签 */
    --new-badge-bg: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --new-badge-glow: rgba(59, 130, 246, 0.4);

    /* 几何与投影 */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.8);

    /* 动画系统 */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ────────────── 暗色模式令牌 ────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --bg-secondary: #0a0a0b;
        --panel: rgba(12, 12, 14, 0.9);
        --panel-solid: #0f0f11;

        --ink: #f1f5f9;
        --ink-secondary: #cbd5e1;
        --muted: #8b99a8;
        --subtle: #5c6a7a;

        --line: rgba(255, 255, 255, 0.08);
        --line-strong: rgba(255, 255, 255, 0.12);

        --accent: #f1f5f9;
        --accent-soft: rgba(255, 255, 255, 0.03);
        --accent-blue: #60a5fa;

        --card-bg: rgba(16, 16, 18, 0.7);
        --card-hover: rgba(24, 24, 28, 0.85);
        --card-twitter: rgba(18, 18, 22, 0.95);

        --new-badge-bg: linear-gradient(135deg, #60a5fa, #3b82f6);
        --new-badge-glow: rgba(96, 165, 250, 0.5);

        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
        --shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
}

/* ────────────── CSS 重置 ────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
}

/* 背景纹理 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.015;
    background-image: radial-gradient(circle at 1px 1px, currentColor 0.5px, transparent 0);
    background-size: 32px 32px;
    z-index: 0;
}

@media (prefers-color-scheme: dark) {
    body::before {
        opacity: 0.008;
    }
}

/* ────────────── 装饰光球 ────────────── */
.bg-orb {
    position: fixed;
    border-radius: 999px;
    filter: blur(120px);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.orb-a {
    width: 500px;
    height: 500px;
    background: #f97316;
    top: -200px;
    left: -150px;
}

.orb-b {
    width: 450px;
    height: 450px;
    background: #06b6d4;
    right: -150px;
    top: 60px;
}

@media (prefers-color-scheme: dark) {
    .orb-a,
    .orb-b {
        opacity: 0.04;
        filter: blur(150px);
    }
    .orb-a { background: #6366f1; }
    .orb-b { background: #0ea5e9; }
}

/* ────────────── 动画定义 ────────────── */
@keyframes fade-up {
    from {
        transform: translateY(8px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes badge-pulse {
    0%, 100% {
        box-shadow: 0 2px 8px var(--new-badge-glow);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 16px var(--new-badge-glow);
        transform: scale(1.02);
    }
}

@keyframes thumb-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}