:root {
    /* ── 基础色彩 ── */
    --cg-color-bg: #f6f6f8;
    --cg-color-surface: #ffffff;
    --cg-color-border: #e2e8f0;
    --cg-color-text: #0f172a;
    --cg-color-text-muted: #64748b;
    --cg-color-text-primary: var(--cg-color-text);
    --cg-color-text-secondary: var(--cg-color-text-muted);

    /* ── 语义色彩 ── */
    --cg-color-primary: #3976ef;
    --cg-color-primary-hover: #2563eb;
    --cg-color-secondary: #f472b6;
    --cg-color-secondary-hover: #ec4899;
    --cg-color-error: #dc2626;
    --cg-color-danger: var(--cg-color-error);
    --cg-color-success: #16a34a;
    --cg-color-warning: #d97706;
    --cg-color-link: #3976ef;
    --cg-color-on-primary: #ffffff;

    /* ── 间距 ── */
    --cg-spacing-1: 0.25rem;
    --cg-spacing-2: 0.5rem;
    --cg-spacing-3: 0.75rem;
    --cg-spacing-4: 1rem;
    --cg-spacing-5: 1.25rem;
    --cg-spacing-6: 1.5rem;
    --cg-spacing-8: 2rem;
    --cg-spacing-10: 2.5rem;

    /* ── 圆角 ── */
    --cg-radius-sm: 0.25rem;
    --cg-radius-md: 0.5rem;
    --cg-radius-lg: 1rem;
    --cg-radius-xl: 1.5rem;
    --cg-radius-full: 9999px;

    /* ── 字号 ── */
    --cg-font-size-xs: 0.75rem;
    --cg-font-size-sm: 0.875rem;
    --cg-font-size-md: 1rem;
    --cg-font-size-lg: 1.125rem;
    --cg-font-size-xl: 1.5rem;
    --cg-font-size-2xl: 1.75rem;

    /* ── 字重 ── */
    --cg-font-weight-medium: 500;
    --cg-font-weight-semibold: 600;
    --cg-font-weight-bold: 700;

    /* ── 阴影 ── */
    --cg-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --cg-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --cg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --cg-shadow-card-hover: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.06);

    /* ── 字体 ── */
    --cg-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* ── 过渡 ── */
    --cg-transition-fast: 0.15s ease-in-out;
    --cg-transition-normal: 0.3s ease-in-out;

    /* ── 组件 Token ── */
    --cg-color-section-bg: #f8fafc;
    --cg-color-focus-ring: color-mix(in oklab, var(--cg-color-primary) 20%, transparent);
    --cg-color-hover-overlay: rgba(0, 0, 0, 0.04);
    --cg-header-height: 64.67px;

    /* ── 编辑器状态色 ── */
    --cg-color-editor-warning-text: #92400e;
    --cg-color-editor-error-text: #991b1b;
    --cg-color-editor-error-bg: #fee2e2;
    --cg-color-editor-error-border: #fca5a5;

    /* ── 覆盖层/背景 ── */
    --cg-color-overlay: rgba(0, 0, 0, 0.5);
    --cg-color-on-dark: #ffffff;
    --cg-color-on-dark-secondary: rgba(255, 255, 255, 0.85);
    --cg-color-on-dark-muted: rgba(255, 255, 255, 0.7);

    /* ── 星标/徽章色 ── */
    --cg-color-amber: #f59e0b;
    --cg-color-emerald: #10b981;
    --cg-color-emerald-subtle: rgba(16, 185, 129, 0.1);

    /* ── 品牌色（第三方平台） ── */
    --cg-color-brand-bilibili: #ff6699;
    --cg-color-brand-zhihu: #1f1f1f;
    --cg-color-brand-weibo: #e6162d;
    --cg-color-brand-purple: #8b5cf6;
    --cg-color-brand-teal: #14b8a6;

    /* ── 分类标签色 ── */
    --cg-color-badge-entry: #e0f2fe;
    --cg-color-badge-entry-text: #0369a1;
    --cg-color-badge-article: #fce7f3;
    --cg-color-badge-article-text: #be185d;
    --cg-color-badge-tag: #e0e7ff;
    --cg-color-badge-tag-text: #4338ca;
    --cg-color-badge-video: #fef3c7;
    --cg-color-badge-video-text: #b45309;
    --cg-color-badge-periphery: #d1fae5;
    --cg-color-badge-periphery-text: #065f46;

    /* ── 断点约定（文档级，用于 @media 查询） ── */
    /* sm: 640px   大手机/手机横屏 */
    /* md: 768px   平板竖屏 */
    /* lg: 1024px  平板横屏/小笔记本 */
    /* xl: 1440px  桌面 */

    /* ── 响应式间距（mobile-first 默认值） ── */
    --cg-page-gutter: 1rem;
    --cg-section-gap: 2rem;

    /* ── 底部导航栏（含 safe-area） ── */
    --cg-bottom-nav-height: calc(56px + env(safe-area-inset-bottom, 0px));
}

[data-theme="dark"] {
    /* ── 基础色彩 ── */
    --cg-color-bg: #0f1419;
    --cg-color-surface: #1a2332;
    --cg-color-border: #2d3d52;
    --cg-color-text: #e6edf3;
    --cg-color-text-muted: #8b949e;
    --cg-color-text-primary: var(--cg-color-text);
    --cg-color-text-secondary: var(--cg-color-text-muted);

    /* ── 语义色彩 ── */
    --cg-color-primary: #58a6ff;
    --cg-color-primary-hover: #79b8ff;
    --cg-color-secondary: #f778ba;
    --cg-color-secondary-hover: #f99cd0;
    --cg-color-error: #f85149;
    --cg-color-danger: var(--cg-color-error);
    --cg-color-success: #3fb950;
    --cg-color-warning: #d29922;
    --cg-color-link: #58a6ff;
    --cg-color-on-primary: #ffffff;

    /* ── 阴影（暗色模式下减轻） ── */
    --cg-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --cg-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --cg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --cg-shadow-card-hover: 0 8px 25px -5px rgba(0, 0, 0, 0.5), 0 4px 10px -5px rgba(0, 0, 0, 0.3);

    /* ── 组件 Token ── */
    --cg-color-section-bg: #151d28;
    --cg-color-hover-overlay: rgba(255, 255, 255, 0.06);

    /* ── 编辑器状态色 ── */
    --cg-color-editor-warning-text: #e3b341;
    --cg-color-editor-error-text: #f87171;
    --cg-color-editor-error-bg: #3d1214;
    --cg-color-editor-error-border: #5c1f22;

    /* ── 覆盖层 ── */
    --cg-color-overlay: rgba(0, 0, 0, 0.7);

    /* ── 星标/徽章色 ── */
    --cg-color-amber: #e3b341;
    --cg-color-emerald: #3fb950;
    --cg-color-emerald-subtle: rgba(63, 185, 80, 0.15);

    /* ── 品牌色（保持亮色，品牌色不随主题变化） ── */
    --cg-color-brand-zhihu: #e6edf3;

    /* ── 分类标签色 ── */
    --cg-color-badge-entry: #0c2d48;
    --cg-color-badge-entry-text: #58a6ff;
    --cg-color-badge-article: #3d1236;
    --cg-color-badge-article-text: #f778ba;
    --cg-color-badge-tag: #1c1a3d;
    --cg-color-badge-tag-text: #8b8cff;
    --cg-color-badge-video: #3d2900;
    --cg-color-badge-video-text: #e3b341;
    --cg-color-badge-periphery: #0d3321;
    --cg-color-badge-periphery-text: #3fb950;
}

@media (min-width: 768px) {
    :root {
        --cg-page-gutter: 2.5rem;
        --cg-section-gap: 3rem;
        --cg-bottom-nav-height: 0px;
    }
}

/* ── 全局重置 ── */
html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--cg-font-family);
    color: var(--cg-color-text);
    background: var(--cg-color-bg);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--cg-color-link);
    text-decoration: none;
    transition: color var(--cg-transition-fast);
}

a:hover {
    color: var(--cg-color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

h1:focus,
h2:focus,
h3:focus {
    outline: none;
}