/* ==========================================================
 * deepspace 模板 - 设计系统 (Design Tokens + Reset + Base)
 * 原生 CSS, 无任何依赖
 * ========================================================== */

/* ---------- 设计令牌 (Design Tokens) ---------- */
:root {
    /* 主色 - 深空蓝渐变 */
    --ds-bg-0: #0a0e1a;
    --ds-bg-1: #0f1424;
    --ds-bg-2: #161c30;
    --ds-bg-3: #1d2440;
    --ds-bg-4: #252d52;

    /* 表面色 - 玻璃拟态 */
    --ds-surface:        rgba(30, 38, 70, 0.55);
    --ds-surface-strong: rgba(30, 38, 70, 0.85);
    --ds-surface-hover:  rgba(40, 50, 90, 0.75);
    --ds-border:         rgba(120, 150, 220, 0.18);
    --ds-border-strong:  rgba(120, 150, 220, 0.35);

    /* 文字 */
    --ds-text-0: #f0f4ff;   /* 主文字 */
    --ds-text-1: #c4cce0;   /* 次文字 */
    --ds-text-2: #8c95b3;   /* 辅助文字 */
    --ds-text-3: #5c6489;   /* 占位文字 */

    /* 强调色 - 青色高亮 */
    --ds-accent:        #00e5ff;
    --ds-accent-2:      #4c8eff;
    --ds-accent-soft:   rgba(0, 229, 255, 0.15);
    --ds-accent-grad:   linear-gradient(135deg, #00e5ff 0%, #4c8eff 100%);
    --ds-accent-grad-2: linear-gradient(135deg, #4c8eff 0%, #a855f7 100%);

    /* 状态色 */
    --ds-success: #00e5a0;
    --ds-warning: #ffb547;
    --ds-danger:  #ff5577;

    /* 阴影 */
    --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --ds-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.35);
    --ds-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.45);
    --ds-shadow-accent: 0 0 24px rgba(0, 229, 255, 0.35);

    /* 圆角 */
    --ds-radius-sm: 6px;
    --ds-radius:    12px;
    --ds-radius-lg: 18px;
    --ds-radius-xl: 24px;

    /* 间距 */
    --ds-gap-1: 4px;
    --ds-gap-2: 8px;
    --ds-gap-3: 12px;
    --ds-gap-4: 16px;
    --ds-gap-5: 24px;
    --ds-gap-6: 32px;
    --ds-gap-7: 48px;

    /* 字体 */
    --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --ds-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;

    /* 排版 */
    --ds-fz-12: 12px;
    --ds-fz-13: 13px;
    --ds-fz-14: 14px;
    --ds-fz-15: 15px;
    --ds-fz-16: 16px;
    --ds-fz-18: 18px;
    --ds-fz-20: 20px;
    --ds-fz-24: 24px;
    --ds-fz-28: 28px;
    --ds-fz-32: 32px;
    --ds-fz-40: 40px;

    /* 容器 */
    --ds-container: 1280px;
    --ds-container-narrow: 920px;

    /* 动效 */
    --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ds-dur-fast: 150ms;
    --ds-dur: 280ms;
    --ds-dur-slow: 480ms;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
    font-family: var(--ds-font);
    font-size: var(--ds-fz-15);
    line-height: 1.6;
    color: var(--ds-text-0);
    background: var(--ds-bg-0);
    background-image:
        radial-gradient(1200px 600px at 20% -10%, rgba(76, 142, 255, 0.18), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(168, 85, 247, 0.12), transparent 60%),
        radial-gradient(800px 400px at 50% 100%, rgba(0, 229, 255, 0.08), transparent 60%),
        linear-gradient(180deg, var(--ds-bg-0) 0%, var(--ds-bg-1) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ds-accent); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol, li { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.3; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ds-accent-soft); color: var(--ds-text-0); }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-bg-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-accent-2); }

/* ---------- 排版工具 ---------- */
.ds-container { width: 100%; max-width: var(--ds-container); margin: 0 auto; padding: 0 var(--ds-gap-4); }
.ds-container--narrow { max-width: var(--ds-container-narrow); }
.ds-text-2 { color: var(--ds-text-2); }
.ds-text-1 { color: var(--ds-text-1); }
.ds-accent { color: var(--ds-accent); }
.ds-grad   { background: var(--ds-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ds-empty  { padding: var(--ds-gap-6); text-align: center; color: var(--ds-text-2); background: var(--ds-surface); border: 1px dashed var(--ds-border); border-radius: var(--ds-radius); }

/* 隐藏 */
.ds-hide-mobile { display: initial; }
.ds-show-mobile { display: none; }

/* ---------- 字体图标 (SVG sprite via <use>) ---------- */
.ds-icon {
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    stroke: currentColor;
}
.ds-icon--spin { animation: ds-icon-spin 0.9s linear infinite; }
@keyframes ds-icon-spin { to { transform: rotate(360deg); } }

/* ---------- 主题切换按钮 ---------- */
.ds-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    color: var(--ds-text-1);
    cursor: pointer;
    transition: all var(--ds-dur) var(--ds-ease);
}
.ds-theme-toggle:hover { color: var(--ds-accent); border-color: var(--ds-border-strong); }
.ds-theme-toggle .ds-icon[data-icon-light] { display: none; }
.ds-theme-toggle .ds-icon[data-icon-dark]  { display: inline-block; }
[data-theme="light"] .ds-theme-toggle .ds-icon[data-icon-light] { display: inline-block; }
[data-theme="light"] .ds-theme-toggle .ds-icon[data-icon-dark]  { display: none; }

html, body, .ds-card, .ds-header, .ds-quickbar, .ds-footer, .ds-modal__panel, .ds-toast, .ds-search, .ds-btn, .ds-pager__btn, .ds-site, .ds-post-card, .ds-input, .ds-textarea, .ds-select { transition: background-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease); }

/* ==========================================================
 * 亮色主题 (data-theme="light")
 * ========================================================== */
[data-theme="light"] {
    --ds-bg-0: #f5f7fb;
    --ds-bg-1: #ffffff;
    --ds-bg-2: #ffffff;
    --ds-bg-3: #f0f3f9;
    --ds-bg-4: #e2e8f0;

    --ds-surface:        rgba(255, 255, 255, 0.85);
    --ds-surface-strong: rgba(255, 255, 255, 0.98);
    --ds-surface-hover:  rgba(245, 247, 251, 0.95);
    --ds-border:         rgba(15, 20, 36, 0.08);
    --ds-border-strong:  rgba(15, 20, 36, 0.18);

    --ds-text-0: #0f1424;
    --ds-text-1: #4a5070;
    --ds-text-2: #7880a0;
    --ds-text-3: #a8b0c8;

    --ds-shadow-sm: 0 2px 8px rgba(15, 20, 36, 0.06);
    --ds-shadow-md: 0 6px 24px rgba(15, 20, 36, 0.10);
    --ds-shadow-lg: 0 12px 48px rgba(15, 20, 36, 0.14);
    --ds-shadow-accent: 0 0 24px rgba(0, 165, 200, 0.20);
}
[data-theme="light"] body {
    background-image:
        radial-gradient(1200px 600px at 20% -10%, rgba(0, 165, 200, 0.10), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(120, 100, 220, 0.08), transparent 60%),
        linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%);
}
[data-theme="light"] .ds-header { background: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .ds-quickbar { background: rgba(255, 255, 255, 0.7); }
[data-theme="light"] .ds-footer { background: rgba(245, 247, 251, 0.8); }
[data-theme="light"] .ds-site { background: #ffffff; }
[data-theme="light"] .ds-post-card { background: #ffffff; }
[data-theme="light"] .ds-stat li { background: #f5f7fb; }
[data-theme="light"] .ds-search { background: #f5f7fb; }
[data-theme="light"] .ds-skel-text,
[data-theme="light"] .ds-skel-ico,
[data-theme="light"] .ds-skel-cover,
[data-theme="light"] .ds-skel-site,
[data-theme="light"] .ds-skel-post,
[data-theme="light"] .ds-skel-detail { background: linear-gradient(90deg, #eef1f6 0%, #f5f7fb 50%, #eef1f6 100%); }
[data-theme="light"] .ds-search__input::placeholder { color: #b0b6c8; }
[data-theme="light"] .ds-empty { color: #7880a0; }

/* ---------- 焦点环 ---------- */
:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 响应式断点 ---------- */
@media (max-width: 1024px) {
    :root { --ds-container: 100%; }
}
@media (max-width: 768px) {
    body { font-size: var(--ds-fz-14); }
    .ds-hide-mobile { display: none !important; }
    .ds-show-mobile { display: initial; }
}
@media (max-width: 480px) {
    .ds-container { padding: 0 var(--ds-gap-3); }
}