/* =============================================================
   AuroraAPI · Aurora Dimensional 设计系统
   -------------------------------------------------------------
   全局主题层：统一浅/深两套设计令牌 + 组件质感（阴影、圆角、玻璃、辉光）。
   - 浅色：靛紫立体感（柔和分层阴影、玻璃胶囊、大圆角）——参照“Design Dimensional”。
   - 深色：深邃 premium + 极光辉光（青→紫渐变、发光标题、玻璃卡片）——参照“Premium 数据平台”。
   各页面在自己的 <style> :root 里定义了同名令牌，本文件用更高优先级的
   html[data-theme="light|dark"] 覆盖其“值”，从而全站统一，无需逐页改写。
   本文件在各页内联 <style> 之后加载，故可覆盖。由 theme.js 在首屏前设 data-theme。
   ============================================================= */

/* ---------- 平滑主题过渡 ----------
   仅对“廉价”属性做全局过渡（背景/边框/文字色），并排除 SVG 内部节点。
   刻意不在通配符上过渡 box-shadow / fill：
   - box-shadow 逐元素动画需每帧重绘阴影模糊，卡片一多点击切换就会卡顿；
   - fill 会命中每个图标内部的大量 path/line 子节点。
   需要阴影平滑过渡的卡片，各自组件样式里已带 box-shadow 过渡，不受影响。 */
html.theme-ready,
html.theme-ready body,
html.theme-ready *:not(svg):not(svg *) {
    transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* =============================================================
   浅色主题令牌（Dimensional）
   ============================================================= */
html[data-theme="light"] {
    --bg-color: #f3f4fb;
    --bg-subtle: #eceef8;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --sidebar-bg: #ffffff;

    --text-dark: #14162e;
    --text-normal: #43476b;
    --text-light: #6b7194;
    --text-subtle: #9aa0bf;

    --border-color: #e6e7f3;
    --border-subtle: #eef0f8;

    --primary-color: #6366f1;
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #eef0ff;
    --primary-lighter: #f4f5ff;
    --primary-gradient: linear-gradient(135deg, #6d5efc 0%, #8b5cf6 100%);
    --hot-bar: linear-gradient(90deg, #6d5efc, #8b5cf6);

    --success: #10b981; --success-green: #10b981; --success-light: #d1fae5; --success-bg: #ecfdf5;
    --warning: #f59e0b; --warning-amber: #f59e0b; --warning-light: #fde68a; --warning-bg: #fffbeb;
    --error: #ef4444; --error-red: #ef4444; --error-light: #f87171; --error-bg: #fef2f2;
    --info-blue: #3b82f6; --info-light: #93c5fd; --info-bg: #eff6ff;

    /* 立体分层阴影（靛紫微染） */
    --shadow-color: rgba(79, 70, 229, 0.10);
    --shadow-sm: 0 1px 2px rgba(30, 27, 75, 0.06);
    --shadow-md: 0 10px 26px -14px rgba(79, 70, 229, 0.22), 0 2px 6px rgba(30, 27, 75, 0.05);
    --shadow-medium: 0 10px 26px -14px rgba(79, 70, 229, 0.22), 0 2px 6px rgba(30, 27, 75, 0.05);
    --shadow-lg: 0 26px 52px -22px rgba(79, 70, 229, 0.30), 0 8px 18px -10px rgba(30, 27, 75, 0.10);
    --shadow-strong: 0 26px 52px -22px rgba(79, 70, 229, 0.30), 0 8px 18px -10px rgba(30, 27, 75, 0.10);
    --shadow-glow: 0 12px 30px -8px rgba(99, 102, 241, 0.45);
}

/* 浅色全局背景：柔和薰衣草 + 两处极淡靛紫光晕（立体氛围） */
html[data-theme="light"] body {
    background:
        radial-gradient(900px 460px at 100% -6%, rgba(109, 94, 252, 0.10), transparent 60%),
        radial-gradient(760px 420px at -8% 4%, rgba(139, 92, 246, 0.08), transparent 55%),
        var(--bg-color);
    background-attachment: fixed;
}

/* =============================================================
   深色主题令牌（Premium + Aurora Glow）
   ============================================================= */
html[data-theme="dark"] {
    --bg-color: #080b16;
    --bg-subtle: #0c1020;
    --content-bg: #0f1424;
    --card-bg: #131a2e;
    --sidebar-bg: #0a0e1c;

    --text-dark: #f2f5fb;
    --text-normal: #c6d0e2;
    --text-light: #8b97af;
    --text-subtle: #63708c;

    --border-color: #222b45;
    --border-subtle: #1a2238;

    /* 主色提亮 + 极光副色（青） */
    --primary-color: #818cf8;
    --primary: #818cf8;
    --primary-hover: #6366f1;
    --primary-dark: #a5b4fc;
    --primary-light: rgba(129, 140, 248, 0.16);
    --primary-lighter: rgba(129, 140, 248, 0.10);
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
    --hot-bar: linear-gradient(90deg, #6366f1, #22d3ee);
    --aurora-cyan: #22d3ee;

    --success: #34d399; --success-green: #34d399; --success-light: rgba(52,211,153,0.22); --success-bg: rgba(52,211,153,0.12);
    --warning: #fbbf24; --warning-amber: #fbbf24; --warning-light: rgba(251,191,36,0.22); --warning-bg: rgba(251,191,36,0.12);
    --error: #f87171; --error-red: #f87171; --error-light: rgba(248,113,113,0.22); --error-bg: rgba(248,113,113,0.12);
    --info-blue: #60a5fa; --info-light: rgba(96,165,250,0.22); --info-bg: rgba(96,165,250,0.12);

    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --shadow-medium: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 50px -18px rgba(0, 0, 0, 0.7);
    --shadow-strong: 0 24px 50px -18px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.35);
}

/* 深色全局背景：深邃 navy + 角落极光辉光（青紫，参照参考图 2） */
html[data-theme="dark"] body {
    background:
        radial-gradient(760px 520px at 0% 0%, rgba(34, 211, 238, 0.10), transparent 55%),
        radial-gradient(820px 560px at 100% 100%, rgba(139, 92, 246, 0.12), transparent 55%),
        radial-gradient(600px 400px at 100% 0%, rgba(99, 102, 241, 0.08), transparent 50%),
        var(--bg-color);
    background-attachment: fixed;
    color: var(--text-normal);
}

/* 深色下卡片/内容面板加一层极细高光描边，营造玻璃质感 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .api-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .content-section,
html[data-theme="dark"] .panel {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), var(--shadow-sm);
}

/* ---------- 深色下常见硬编码表面兜底 ---------- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #0e1424;
    color: var(--text-dark);
    border-color: var(--border-color);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text-subtle); }
html[data-theme="dark"] thead th { background: rgba(255,255,255,0.02); }
html[data-theme="dark"] tbody tr:hover { background: rgba(129,140,248,0.06); }
html[data-theme="dark"] pre,
html[data-theme="dark"] code { background: #0a0f1e !important; color: #cbd5e1; border-color: var(--border-color); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #c9cce0; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a5a9c8; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3a57; background-clip: content-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4d70; background-clip: content-box; }

/* ---------- 可访问焦点环 ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: 2px;
    border-radius: 6px;
}

/* =============================================================
   全局组件质感增强（作用于两种主题；仅提升观感，不改结构）
   ============================================================= */
/* 渐变主按钮统一带柔和辉光 + 悬浮上移 */
.cta-primary, .btn-details, .btn-primary {
    box-shadow: var(--shadow-glow);
    transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, filter .22s ease;
}
.cta-primary:hover, .btn-details:hover, .btn-primary:hover {
    transform: translateY(-2px);
    filter: saturate(1.05);
}

/* 深色下发光标题（渐变文字 + 轻微光晕），用于 hero 大标题 */
html[data-theme="dark"] .top-header-content h1 {
    text-shadow: 0 0 40px rgba(99, 102, 241, 0.35);
}

@media print { #aurora-theme-toggle { display: none !important; } }

/* =============================================================
   浮动主题切换按钮（由 theme.js 注入 #aurora-theme-toggle）
   ============================================================= */
#aurora-theme-toggle {
    position: fixed; right: 22px; bottom: 22px; z-index: 2147483000;
    width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-gradient, linear-gradient(135deg,#667eea,#764ba2));
    color: #fff; box-shadow: 0 10px 28px rgba(99, 102, 234, 0.5);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
    -webkit-tap-highlight-color: transparent;
}
#aurora-theme-toggle:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 34px rgba(99,102,234,.6); }
#aurora-theme-toggle:active { transform: translateY(-1px) scale(.98); }
#aurora-theme-toggle svg { width: 22px; height: 22px; }
#aurora-theme-toggle .icon-sun { display: none; }
#aurora-theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] #aurora-theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] #aurora-theme-toggle .icon-moon { display: none; }