/* =========================================================================
   theme-magazine.css — 「杂志阅读风 · 纸质暖调」主题覆盖层
   -------------------------------------------------------------------------
   加载顺序：必须位于 main.css / heroui-bridge.css / onboarding.css 之后
   设计原则：只覆盖「设计令牌 + 视觉表现」，不改动任何布局结构与类名，
            因此不会影响依赖现有类名的 JS 逻辑。
   回退方式：删除本文件，或移除 index.html 里的 <link>，即可完全还原。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 设计令牌：纸张底色 / 墨色文字 / 朱砂强调
   ------------------------------------------------------------------------- */
:root {
    /* —— 纸张与墨色（替换原冷灰蓝系统） —— */
    --color-white: #fffdf8;
    --color-gray-50: #faf7f1;
    --color-gray-100: #f3ede2;
    --color-gray-200: #e6ddcd;
    --color-gray-300: #d5c9b4;
    --color-gray-400: #a89a83;
    --color-gray-500: #857763;
    --color-gray-600: #6b5f4d;
    --color-gray-700: #4e4538;
    --color-gray-800: #362f26;
    --color-gray-900: #241f18;

    /* —— 强调色：朱砂红 / 赭石金（替换原紫蓝渐变） —— */
    --color-brand-primary: #9c3d2e;
    --color-brand-secondary: #a9743f;
    --color-brand-gradient: linear-gradient(135deg, #9c3d2e 0%, #a9743f 100%);

    /* —— 语义色（暖化处理，避免刺眼的霓虹色） —— */
    --color-success: #4f7a4a;
    --color-success-bg: #eef3ea;
    --color-warning: #b07d22;
    --color-warning-bg: #fbf4e6;
    --color-error: #a33125;
    --color-error-bg: #f9ece9;
    --color-info: #4a6b78;
    --color-info-bg: #eef3f5;

    /* —— 字体：衬线为主，营造阅读感 —— */
    --font-family-primary: Georgia, 'Times New Roman', 'Songti SC', 'STSong',
        'Noto Serif SC', 'SimSun', serif;
    --font-family-serif: Georgia, 'Times New Roman', 'Songti SC', 'STSong',
        'Noto Serif SC', 'SimSun', serif;

    /* —— 行距：加宽，适合长时间阅读 —— */
    --line-height-tight: 1.28;
    --line-height-normal: 1.75;
    --line-height-relaxed: 1.9;

    /* —— 圆角：方正，靠近印刷品 —— */
    --border-radius-sm: 1px;
    --border-radius-md: 2px;
    --border-radius-lg: 2px;
    --border-radius-xl: 3px;
    --border-radius-2xl: 4px;

    /* —— 阴影：几乎不用，靠细线分隔 —— */
    --shadow-sm: 0 1px 0 rgba(36, 31, 24, 0.04);
    --shadow-md: 0 1px 2px rgba(36, 31, 24, 0.06);
    --shadow-lg: 0 2px 6px rgba(36, 31, 24, 0.08);
    --shadow-xl: 0 4px 12px rgba(36, 31, 24, 0.1);

    /* —— heroUI 令牌（覆盖玻璃拟态那套） —— */
    --shui-shell-max-width: 1180px;
    --shui-panel-bg: #fffdf8;
    --shui-panel-border: #e0d6c6;
    --shui-panel-shadow: none;
    --shui-surface-bg: #faf7f1;
    --shui-surface-border: #e0d6c6;
    --shui-text-strong: #241f18;
    --shui-text-muted: #6b5f4d;
    --shui-accent: #9c3d2e;
    --shui-accent-alt: #a9743f;
    --shui-gradient-start: #f3ede2;
    --shui-gradient-end: #e6ddcd;
    --shui-radius-xl: 3px;
    --shui-radius-lg: 3px;
    --shui-radius-md: 2px;
    --shui-radius-sm: 2px;
    --shui-blur: 0px;

    /* —— 设置视图令牌 —— */
    --bauhaus-text-main: #241f18;
    --bauhaus-text-muted: #6b5f4d;
    --bauhaus-accent-red: #9c3d2e;
    --bauhaus-accent-blue: #4a6b78;
    --bauhaus-accent-dark: #4e4538;
    --bauhaus-glass-border: #e0d6c6;
    --bauhaus-glass-shadow: none;

    /* —— 词汇视图令牌 —— */
    --bg: #faf7f1;
    --panel: #fffdf8;
    --line: #e6ddcd;
    --lineSubtle: #f0eae0;
    --text: #241f18;
    --muted: #6b5f4d;
    --accent: #9c3d2e;
    --accentSoft: #f6ece6;

    /* —— 题库条目令牌 —— */
    --exam-item-bg: #fffdf8;
    --exam-item-border-color: #d5c9b4;

    /* —— 卡片点缀 —— */
    --suite-card-accent-overlay: linear-gradient(
        135deg,
        rgba(156, 61, 46, 0.06),
        rgba(169, 116, 63, 0.04)
    );
    --suite-card-icon-bg: #f6ece6;
    --bloom-surface: #fffdf8;
    --bloom-surface-strong: #faf7f1;
    --bloom-border: #e0d6c6;
    --bloom-border-strong: #d5c9b4;
    --bloom-sheen: none;
    --bloom-highlight: linear-gradient(120deg, #9c3d2e 0%, #a9743f 100%);
    --bloom-shadow: none;
}

/* -------------------------------------------------------------------------
   2. 页面底色：宣纸质感（替换冷白 + 关闭动画渐变）
   ------------------------------------------------------------------------- */
body,
body.hero-body,
body.theme-blue,
body.blue-dark-mode,
body.bloom-dark-mode {
    background: #f4efe6 !important;
    background-image: none !important;
    animation: none !important;
    color: #241f18 !important;
    font-family: var(--font-family-primary);
}

/* 隐藏彩色粒子背景：杂志风需要干净的纸面 */
#shui-three-bg,
body::before,
body.theme-blue::before {
    display: none !important;
    background: none !important;
}

/* 细颗粒纸纹（极淡，增强印刷质感） */
body.hero-body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.35;
    background-image: radial-gradient(
        rgba(120, 100, 70, 0.055) 1px,
        transparent 1px
    );
    background-size: 4px 4px;
}

/* -------------------------------------------------------------------------
   3. 卡片 / 面板：去掉玻璃拟态，改为纸质卡片 + 细线
   ------------------------------------------------------------------------- */
.hero-panel,
.hero-surface,
.category-card,
.tool-card,
.stat-card,
.data-management-panel,
.practice-history,
.vocab-view-shell,
.history-item,
.exam-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fffdf8 !important;
    background-image: none !important;
    border: 1px solid #e0d6c6 !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}

.category-card::before,
.hero-panel::before,
.hero-surface::before {
    display: none !important;
}

/* 面板标题：加一条细横线，杂志式分隔 */
.hero-panel__title {
    font-family: var(--font-family-serif) !important;
    border-bottom: 1px solid #e6ddcd;
    padding-bottom: 10px;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}

.hero-panel__muted {
    color: #6b5f4d !important;
    font-size: 0.86em;
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   4. 标题排版：衬线 + 收字距
   ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
.hero-panel__title,
.browse-title-trigger,
.lm-title,
.practice-record-title,
.record-title,
.vocab-view-shell h1,
.vocab-view-shell h2 {
    font-family: var(--font-family-serif) !important;
    color: #241f18 !important;
    letter-spacing: -0.005em;
    font-weight: 700;
}

.hero-header h1 {
    font-family: var(--font-family-serif) !important;
    letter-spacing: 0.005em;
    text-shadow: none !important;
}

/* 页面主标题：下方双线（杂志刊头感） */
.hero-header {
    border-bottom: 3px double #d5c9b4;
    padding-bottom: 18px;
}

/* -------------------------------------------------------------------------
   5. 按钮：方正的印刷质感
   ------------------------------------------------------------------------- */
.btn,
.hero-btn,
.shui-glass-btn,
.shui-filter-btn,
.shui-segmented-btn,
.data-mgmt-btn,
.exam-item-action-btn,
.nav-btn,
.hero-nav__btn,
.lm-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-image: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    font-family: var(--font-family-primary) !important;
    letter-spacing: 0.02em;
    transition: background-color 160ms ease, color 160ms ease,
        border-color 160ms ease !important;
}

/* 主按钮：朱砂实心 */
.btn-primary,
.hero-btn--primary,
.shui-glass-btn--primary {
    background: #9c3d2e !important;
    border: 1px solid #8a3527 !important;
    color: #fffdf8 !important;
}

.btn-primary:hover,
.hero-btn--primary:hover,
.shui-glass-btn--primary:hover {
    background: #8a3527 !important;
}

/* 次按钮：描边 */
.btn-secondary,
.hero-btn--ghost,
.shui-glass-btn--ghost {
    background: transparent !important;
    border: 1px solid #c9bda8 !important;
    color: #4e4538 !important;
}

.btn-secondary:hover,
.hero-btn--ghost:hover,
.shui-glass-btn--ghost:hover {
    background: #f3ede2 !important;
    border-color: #9c3d2e !important;
    color: #9c3d2e !important;
}

/* 顶部「大蓝书」按钮：保持蓝色（按你的要求，不被纸质主题覆盖） */
.hero-badge--cta {
    background: #0000ff !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   6. 导航
   ------------------------------------------------------------------------- */
.hero-nav,
.main-nav {
    background: transparent !important;
    border-bottom: 1px solid #e0d6c6;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.nav-btn,
.hero-nav__btn {
    background: transparent !important;
    border: none !important;
    color: #6b5f4d !important;
    letter-spacing: 0.05em;
    font-size: 0.94em;
}

.nav-btn:hover,
.hero-nav__btn:hover {
    color: #9c3d2e !important;
    background: #f3ede2 !important;
}

.nav-btn.active,
.hero-nav__btn.active {
    color: #9c3d2e !important;
    background: transparent !important;
    border-bottom: 2px solid #9c3d2e !important;
    font-weight: 700;
}

/* 液态指示器：改为朴素下划线 */
.hero-nav__liquid-indicator {
    background: #9c3d2e !important;
    background-image: none !important;
    border-radius: 0 !important;
    filter: none !important;
    box-shadow: none !important;
    height: 2px !important;
}

/* -------------------------------------------------------------------------
   7. 表单控件
   ------------------------------------------------------------------------- */
input,
textarea,
select,
.search-input {
    background: #fffdf8 !important;
    border: 1px solid #d5c9b4 !important;
    border-radius: 2px !important;
    color: #241f18 !important;
    box-shadow: none !important;
    font-family: var(--font-family-primary) !important;
}

input:focus,
textarea:focus,
select:focus,
.search-input:focus {
    outline: none !important;
    border-color: #9c3d2e !important;
    box-shadow: 0 0 0 2px rgba(156, 61, 46, 0.12) !important;
}

::placeholder {
    color: #a89a83 !important;
}

/* -------------------------------------------------------------------------
   8. 弹窗
   ------------------------------------------------------------------------- */
#license-modal .lm-card,
.modal-content,
.modal {
    background: #fffdf8 !important;
    border: 1px solid #d5c9b4 !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 32px rgba(36, 31, 24, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#license-modal .lm-title {
    font-family: var(--font-family-serif) !important;
    border-bottom: 1px solid #e6ddcd;
    padding-bottom: 10px;
}

#license-modal .lm-warning {
    color: #9c3d2e !important;
}

/* -------------------------------------------------------------------------
   9. 表格 / 列表分隔线
   ------------------------------------------------------------------------- */
.exam-item,
.history-item {
    border-bottom: 1px solid #f0eae0 !important;
}

.exam-item:hover,
.history-item:hover {
    background: #faf7f1 !important;
}

/* -------------------------------------------------------------------------
   10. 滚动条（细节质感）
   ------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f3ede2;
}

::-webkit-scrollbar-thumb {
    background: #d5c9b4;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #a89a83;
}

/* -------------------------------------------------------------------------
   11. 链接与强调文字
   ------------------------------------------------------------------------- */
a {
    color: #9c3d2e;
}

a:hover {
    color: #8a3527;
}

strong,
b {
    color: #362f26;
}