/* ============================================================
 * 聂氏家谱 · 书卷风设计系统 (theme.css)
 * 美学方向:宣纸 + 墨色 + 朱砂 + 古铜金
 * 字体:思源宋体(标题) + 思源黑体(正文) + 楷体(装饰)
 * ============================================================
 * 字体文件说明(本地嵌入方案):
 * 请将以下字体文件放入 static/fonts/ 目录:
 *   - NotoSerifSC-Black.woff2      (思源宋体 Heavy,标题用)
 *   - NotoSerifSC-Bold.woff2       (思源宋体 Bold,副标题用)
 *   - NotoSansSC-Regular.woff2     (思源黑体 Regular,正文用)
 *   - NotoSansSC-Medium.woff2      (思源黑体 Medium,强调用)
 * 下载地址:https://fonts.google.com/noto/specimen/Noto+Serif+SC
 *           https://fonts.google.com/noto/specimen/Noto+Sans+SC
 * 在放入字体文件前,系统会自动用 STSong/SimSun 等系统字体兜底。
 * ============================================================ */

/* ===== 字体声明 ===== */
@font-face {
    font-family: 'Noto Serif SC';
    src: url('../fonts/NotoSerifSC-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif SC';
    src: url('../fonts/NotoSerifSC-Black.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans SC';
    src: url('../fonts/NotoSansSC-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans SC';
    src: url('../fonts/NotoSansSC-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

/* ===== 色彩系统 ===== */
:root {
    /* 宣纸底色系 */
    --paper:        #f5ecd9;   /* 主背景:宣纸米 */
    --paper-deep:   #ebe0c4;   /* 深宣纸:卡片/分区底 */
    --paper-light:  #faf4e6;   /* 浅宣纸:输入框/卡片内 */

    /* 墨色系 */
    --ink:          #1a1a1a;   /* 主文字:墨黑 */
    --ink-soft:     #4a4a4a;   /* 辅助文字:淡墨(不用浅灰) */
    --ink-faint:    #6b6356;   /* 次要信息:青砖灰 */

    /* 朱砂系(强调/当前/印章) */
    --cinnabar:        #a8302a;   /* 朱砂红 */
    --cinnabar-deep:   #8a2620;   /* 深朱砂:悬停 */
    --cinnabar-light:  #c94842;   /* 浅朱砂:次强调 */

    /* 古铜金系(世系徽章/分割) */
    --gold:        #b8924a;   /* 古铜金 */
    --gold-deep:   #8f6f30;   /* 深古铜 */
    --gold-light:  #d4b06a;   /* 浅古铜 */

    /* 青砖绿系(次要按钮/成功) */
    --jade:        #5a7a5a;   /* 青砖绿 */
    --jade-deep:   #4a6a4a;   /* 深青砖 */

    /* 线条系 */
    --line:        #c9b896;   /* 米色分割线 */
    --line-soft:   #d9cca8;   /* 浅米色分割线 */

    /* 字体族:本地优先 woff2,服务器回退到系统中文字体 */
    --font-display: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", "Noto Sans CJK SC", serif;
    --font-body:    "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", "Noto Sans CJK SC", sans-serif;
    --font-deco:    "FZKai-Z03", "KaiTi", "STKaiti", "Noto Serif SC", "WenQuanYi Micro Hei", serif;

    /* 字号阶梯(中老年优化,基准 18px) */
    --fs-caption:  14px;   /* 辅助说明 */
    --fs-body:     16px;   /* 正文(手机端可读) */
    --fs-body-lg:  18px;   /* 大正文 */
    --fs-name:     22px;   /* 人名 */
    --fs-sub:      24px;   /* 副标题 */
    --fs-title:    28px;   /* 页标题 */
    --fs-vol:      36px;   /* 卷名/家谱标题 */

    /* 间距 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* 触控区(中老年适配,最小 48px) */
    --touch-min: 48px;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ===== 全局重置(覆盖 style.css 的默认值) ===== */
body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;   /* 大行高,老人易读 */
    /* 宣纸纹理:多层渐变模拟纸张质感 */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(184, 146, 74, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168, 48, 42, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.015) 0%, transparent 70%);
}

/* ===== 宣纸纹理叠加层(可选,通过 body::before 实现) ===== */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    /* SVG noise 纹理,模拟宣纸颗粒 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 确保内容在纹理之上 */
.container { position: relative; z-index: 1; }

/* ===== 标题字体 ===== */
h1, h2, h3, .vol-name {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 900;
}

/* ===== 朱砂印章(当前人/家谱标识) ===== */
.seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--cinnabar);
    color: var(--paper-light);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    border-radius: 4px;
    box-shadow: 0 0 0 2px var(--cinnabar) inset, 0 0 0 4px var(--paper) inset;
    transform: rotate(-3deg);
    letter-spacing: 0;
    /* 印章不规则边缘效果 */
    filter: drop-shadow(0 1px 2px rgba(168, 48, 42, 0.3));
}

/* 朱砂圆印(用于世系徽章) */
.seal-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--cinnabar);
    color: var(--paper-light);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--cinnabar) inset, 0 0 0 4px var(--paper) inset;
}

/* ===== 古铜金分割线(替代灰色 border) ===== */
.divider-gold {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
    margin: var(--space-lg) 0;
    position: relative;
}
.divider-gold::after {
    content: "❖";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    padding: 0 12px;
    color: var(--gold);
    font-size: 14px;
}

/* ===== 书卷风卡片(用于树容器/详情区) ===== */
.scroll-card {
    background: var(--paper-light);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow:
        0 1px 3px rgba(74, 60, 40, 0.08),
        0 4px 12px rgba(74, 60, 40, 0.04);
    position: relative;
}
/* 卡片顶部金线装饰 */
.scroll-card::before {
    content: "";
    position: absolute;
    top: 0; left: var(--space-lg); right: var(--space-lg);
    height: 2px;
    background: linear-gradient(to right, var(--gold-light), var(--gold), var(--gold-light));
    border-radius: 0 0 2px 2px;
}

/* ===== 按钮系统(书卷风,大触控区) ===== */
.btn-ink {
    min-height: var(--touch-min);
    padding: 12px 24px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.25s ease;
    text-decoration: none;
}
.btn-ink:hover {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2);
}

.btn-cinnabar {
    min-height: var(--touch-min);
    padding: 12px 24px;
    background: var(--cinnabar);
    color: var(--paper);
    border: 1px solid var(--cinnabar);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.25s ease;
    text-decoration: none;
}
.btn-cinnabar:hover {
    background: var(--cinnabar-deep);
    border-color: var(--cinnabar-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(168, 48, 42, 0.3);
}

.btn-jade {
    min-height: var(--touch-min);
    padding: 12px 24px;
    background: var(--jade);
    color: var(--paper);
    border: 1px solid var(--jade);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.25s ease;
    text-decoration: none;
}
.btn-jade:hover {
    background: var(--jade-deep);
    border-color: var(--jade-deep);
    transform: translateY(-1px);
}

.btn-outline {
    min-height: var(--touch-min);
    padding: 12px 24px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.25s ease;
    text-decoration: none;
}
.btn-outline:hover {
    background: var(--paper-deep);
    border-color: var(--ink);
}

/* ===== 页眉卷名条(每页顶部) ===== */
.volume-header {
    text-align: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-lg);
}
.volume-header .vol-title {
    font-family: var(--font-deco);
    font-size: var(--fs-vol);
    color: var(--ink);
    letter-spacing: 0.2em;
    margin: 0;
}
.volume-header .vol-sub {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--ink-faint);
    margin-top: var(--space-xs);
    letter-spacing: 0.1em;
}

/* ===== 世系徽章(古铜金圆角,替代蓝色圆点) ===== */
.gen-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    background: var(--gold);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(143, 111, 48, 0.3);
}

/* ===== 输入框(书卷风) ===== */
input, select, textarea {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--ink);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--cinnabar) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(168, 48, 42, 0.15);
}

/* ===== 手机端字号放大(中老年适配) ===== */
@media (max-width: 768px) {
    :root {
        --fs-body:    17px;
        --fs-body-lg: 19px;
        --fs-name:    24px;
        --fs-sub:     26px;
        --fs-title:   30px;
    }
    body { font-size: var(--fs-body); }
}

/* ===== 打印样式(PDF 导出时复用) ===== */
@media print {
    body::before { display: none; }
    body { background: white; color: black; }
    .no-print { display: none !important; }
}