/**
 * base.css - 基础样式
 * 包含：重置样式、CSS变量、全局样式
 */
/* 默认字体（Saira），由 JS 在运行时根据用户自定义字体动态覆写 */
@font-face {
    font-family: 'SiteFont';
    src: url('/font/Saira.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* CSS变量 - 浅色主题（默认）
   策略：base.css 仅提供实色 base 变量，最终派生颜色由 JS 计算 rgba 后写入，
   避免 color-mix + calc(var()) 的浏览器兼容性问题 */
:root {
    /* 基础实色变量 —— 浅色主题 */
    --primary-base: #1e88e5;
    --primary-light-base: #42a5f5;
    --primary-dark-base: #1565c0;
    --bg-color-base: #f5f9ff;
    --bg-card-base: #ffffff;
    --surface-base: #ffffff;
    --text-base: #333333;
    --text-light-base: #666666;
    --text-muted-base: #999999;
    --border-base: #e0e8f0;

    /* 派生变量 —— 默认 100% 不透明，JS 会根据设置实时覆盖 */
    --primary-color: #1e88e5;
    --primary-light: #42a5f5;
    --primary-dark: #1565c0;
    --text-color: #333333;
    --text-light: #666666;
    --text-muted: #999999;
    --bg-card: #ffffff;
    --surface-color: #ffffff;
    --border-color: #e0e8f0;
    --bg-color: #f5f9ff;

    /* 阴影（保持实色） */
    --shadow: 0 2px 8px rgba(30, 136, 229, 0.1);
    --shadow-hover: 0 4px 16px rgba(30, 136, 229, 0.2);

    /* 个性化可配置变量 */
    --font-scale: 1;
    --card-gap: 20px;
    --category-gap: 16px;
    /* 全站字体（默认 Saira，JS 会动态注入用户自定义字体的 @font-face 覆写） */
    --font-family: 'SiteFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* 背景图片相关 */
    --bg-image: none;
    --bg-image-size: cover;
    --bg-image-position: center center;
    --bg-image-repeat: no-repeat;
    --bg-attachment: fixed;
    --bg-brightness: 1;  /* 背景亮度因子，1 = 原图 */
}

/* 深色主题 —— 覆盖 base 实色变量（提亮弱文字以保证可读性） */
body[data-theme="dark"] {
    --primary-base: #64b5f6;
    --primary-light-base: #90caf9;
    --primary-dark-base: #1976d2;
    --bg-color-base: #0f1419;
    --bg-card-base: #1a1f2e;
    --surface-base: #1f2636;
    --text-base: #eef0f3;
    --text-light-base: #b8c0cc;
    --text-muted-base: #8a93a4;
    --border-base: #2f3548;
    /* --bg-color 必须在深色模式下显式覆盖，否则会沿用 :root 的 #f5f9ff，
       导致 body 背景、所有 hover 态（卡片/分类/历史条目/引擎选项）在深色下显示浅色背景 */
    --bg-color: #0f1419;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* 全局样式 */
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: calc(14px * var(--font-scale));
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 背景图片层（固定不动，不随滚动改变） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--bg-image);
    background-size: var(--bg-image-size);
    background-position: var(--bg-image-position);
    background-repeat: var(--bg-image-repeat);
    filter: brightness(var(--bg-brightness));
    z-index: 0;
    pointer-events: none;
}

/* 背景图片遮罩层（保证文字可读性） */
body[data-bg-mask="true"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
}
/* 内容始终在背景图层之上 */
body > *:not(.modal) {
    position: relative;
    z-index: 1;
}
/* navbar 保持 sticky 置顶 */
body > .navbar {
    position: sticky;
    z-index: 100;
}

/* 主体容器 */
.main-container {
    flex: 1;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
}
/* 工具类 */
.hidden {
    display: none !important;
}

/* Toast 提示动画（导航站 & 文字页 showToast 共用） */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}