/* ============================================================
   Typeloom MBTI — 编辑杂志风设计层 (Editorial Override)
   加载顺序：在 header.php 内联 <style> 之后，来源顺序胜出
   策略：
     1) 覆写 :root 令牌值 → 所有引用 var(--accent)/var(--bg) 的组件自动重新着色
     2) 针对性覆写形状/阴影/字体 → 摆脱 AI 通用模板感（紫蓝渐变/大圆角/柔焦/系统字体）
   设计语言：暖纸底 · 陶土主色 · MiSans 全站主字体（OFL 1.1 开源可商用）+ Noto Sans SC 中文回退 + Space Grotesk 拉丁标签回退
             · 锋利小圆角 · 硬边印刷阴影 · 发丝规则线 · 手工编排质感
   ============================================================ */

/* ============================================================
   1. 设计令牌 — 浅色（编辑杂志）
   ============================================================ */
:root {
  /* 字体：全站MiSans（展示黑体）/ 中文回退 Noto Sans SC / 拉丁标签回退 Space Grotesk */
  --font-sans: "MiSans", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "MiSans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: "MiSans", "Space Grotesk", "Noto Sans SC", ui-monospace, "SF Mono", Menlo, monospace;

  /* 主色：陶土 terracotta（取代酒红） */
  --accent:        #BF4D2C;
  --accent-hover:  #9E3C20;
  --accent-soft:   #F2E2D6;
  --accent-soft-2: #E9D3C2;
  --accent-soft-3: #F7EDE3;
  --on-accent:     #FBF6EC;
  /* 反 AI：不用渐变。保留变量名但置为实色，避免组件失真 */
  --accent-grad:       #BF4D2C;
  --accent-grad-soft:  #F2E2D6;

  /* 四家族点缀色：NT 松绿 / NF 柔桃 / SJ 赭黄 / SP 橄榄 */
  --teal:   #2C5F57;
  --green:  #6E7B4D;
  --orange: #B07A2A;
  --pink:   #8A5566;
  --gold:   #B07A2A;

  /* 暖纸面层级 */
  --bg:         #F4ECDD;
  --bg-alt:     #EFE5D2;
  --bg-card:    #FBF6EC;
  --bg-subtle:  #F4ECDD;
  --bg-sunken:  #E7DBC4;

  /* 墨色文字层级 */
  --text-1: #241C16;
  --text-2: #5A4F45;
  --text-3: #6F6A5E;   /* AA：≈4.6:1 on paper */
  --text-4: #B3A48E;

  /* 暖色发丝边框 */
  --border:        #D9CDB8;
  --border-soft:   rgba(36, 28, 22, 0.07);
  --border-strong: #C4B59E;
  --hairline:      rgba(36, 28, 22, 0.10);

  /* 纸感阴影：低透明、暖调、近地；关键元素用硬边印刷阴影 */
  --shadow-xs:  0 1px 2px rgba(36, 28, 22, 0.05);
  --shadow-sm:  0 1px 2px rgba(36, 28, 22, 0.05), 0 2px 6px rgba(36, 28, 22, 0.04);
  --shadow-md:  0 4px 12px rgba(36, 28, 22, 0.07), 0 2px 5px rgba(36, 28, 22, 0.04);
  --shadow-lg:  0 12px 32px rgba(36, 28, 22, 0.10), 0 4px 12px rgba(36, 28, 22, 0.06);
  --shadow-card: 0 1px 2px rgba(36, 28, 22, 0.04), 0 8px 24px rgba(36, 28, 22, 0.06);
  /* 主 CTA：硬边印刷阴影（反 AI 柔焦） */
  --shadow-accent:    3px 3px 0 var(--accent-hover);
  --shadow-accent-lg: 4px 4px 0 var(--accent-hover);

  /* 锋利小圆角（反大圆角/胶囊） */
  --radius-sm:   2px;
  --radius:      4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-pill: 999px;   /* 仅用于头像等必要圆形元素 */

  /* 导航：暖纸玻璃 */
  --nav-bg:            rgba(251, 246, 236, 0.82);
  --nav-bg-scrolled:   rgba(251, 246, 236, 0.92);
  --nav-border:        rgba(36, 28, 22, 0.10);
}

/* ============================================================
   2. 设计令牌 — 深色（编辑杂志·夜读）
   ============================================================ */
:root[data-theme="dark"] {
  --font-sans: "MiSans", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "MiSans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: "MiSans", "Space Grotesk", "Noto Sans SC", ui-monospace, "SF Mono", Menlo, monospace;

  --accent:        #E0795A;
  --accent-hover:  #BF4D2C;
  --accent-soft:   rgba(224, 121, 90, 0.16);
  --accent-soft-2: rgba(224, 121, 90, 0.24);
  --accent-soft-3: rgba(224, 121, 90, 0.10);
  --on-accent:     #1C1611;
  --accent-grad:       #E0795A;
  --accent-grad-soft:  rgba(224, 121, 90, 0.16);

  --teal:   #5E8C80;
  --green:  #93A06B;
  --orange: #D99A4A;
  --pink:   #C77E8E;
  --gold:   #D99A4A;

  --bg:        #1A140F;
  --bg-alt:    #221B14;
  --bg-card:   #251D15;
  --bg-subtle: #1E1812;
  --bg-sunken: #120D09;

  --text-1: #F4ECDD;
  --text-2: #C9BBA8;
  --text-3: #8A7E6E;
  --text-4: #5E5446;

  --border:        #3A2F25;
  --border-soft:   rgba(244, 236, 224, 0.08);
  --border-strong: #4A3D30;
  --hairline:      rgba(244, 236, 224, 0.12);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-accent:    3px 3px 0 #000000;
  --shadow-accent-lg: 4px 4px 0 #000000;

  --nav-bg:            rgba(26, 20, 15, 0.78);
  --nav-bg-scrolled:   rgba(26, 20, 15, 0.90);
  --nav-border:        rgba(244, 236, 224, 0.10);
}

/* ============================================================
   3. 基础排版 — 标题衬线 / 眉题标签字体
   ============================================================ */
body { font-family: var(--font-sans); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-1);
  line-height: 1.12;
  font-optical-sizing: auto;
}
h1, .h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 600; }
h2, .h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3, .h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4, .h4 { font-size: clamp(1.1rem, 2vw, 1.3rem); }
p { color: var(--text-2); }
.lead { color: var(--text-2); font-size: 1.12rem; line-height: 1.75; }

/* 眉题 / kicker：Space Grotesk，字距拉开，大写，酒红 */
.kicker,
.eyebrow,
[data-kicker],
.label-mono,
.section-eyebrow {
  font-family: var(--font-label) !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
}

/* 选区：酒红淡染 */
::selection { background: var(--accent-soft-2); color: var(--text-1); }

/* 焦点环：酒红（令牌已变，这里仅修圆角） */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, .nav-link-mbti:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ============================================================
   4. 导航栏 — 编辑报头感（细底线 + 衬线品牌字）
   ============================================================ */
.navbar-mbti {
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: saturate(1.4) blur(12px);
}
.navbar-brand-mbti {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.4rem;
}
.nav-link-mbti.active { color: var(--text-1) !important; font-weight: 500; }
.nav-link-mbti.active::after {
  content: ''; display: block; margin-top: 2px;
  width: 100%; height: 1.5px; border-radius: 1px;
  background: var(--accent);
}
.nav-link-mbti:hover { color: var(--text-1) !important; background: var(--accent-soft) !important; }

/* ============================================================
   5. 按钮 — 锋利 + 硬边印刷阴影（反胶囊/反柔焦）
   ============================================================ */
.btn-primary-mbti {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 500;
  box-shadow: var(--shadow-accent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary-mbti:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-accent-lg);
}
.btn-primary-mbti:active { transform: translate(2px, 2px); box-shadow: none; }

.btn-secondary-mbti {
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-secondary-mbti:hover {
  background: var(--bg-alt);
  border-color: var(--text-2);
  color: var(--text-1);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* 文字链接按钮：保留下划线微交互，箭头改用衬线感 */
.btn-text-link { color: var(--accent); font-family: var(--font-sans); }

/* 导航内 auth 按钮 */
.btn-register-auth {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius) !important;
  color: var(--on-accent) !important;
  box-shadow: var(--shadow-accent) !important;
}
.btn-register-auth:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-accent-lg) !important;
}
.btn-outline-auth {
  border-radius: var(--radius) !important;
  border-color: var(--border-strong) !important;
}
.btn-outline-auth:hover { background: var(--accent-soft) !important; border-color: var(--accent) !important; }

/* ============================================================
   6. 卡片 — 纯纸底 + 发丝边，去白渐变叠层与内发光
   ============================================================ */
.card-mbti {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.card-mbti::after { display: none; }
:root[data-theme="dark"] .card-mbti { background: var(--bg-card); }
.card-mbti:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* ============================================================
   7. 版块与眉题 — 去居中模板感，左对齐编辑编排
   ============================================================ */
.section-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.section-subtitle { color: var(--text-2); }

/* 眉题胶囊 → 改为左侧细规则线的编辑标签 */
.eyebrow {
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  padding: 2px 0 2px 12px;
  letter-spacing: 0.2em;
  font-family: var(--font-label);
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 16px;
}

/* ============================================================
   8. 表单控件 — 锋利 + 酒红聚焦环
   ============================================================ */
.form-control, .form-select {
  border-radius: var(--radius);
  border-color: var(--border-strong);
  background: var(--bg-card);
  font-family: var(--font-sans);
  color: var(--text-1);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ============================================================
   9. 编辑杂志风工具类（供模板按需调用）
   ============================================================ */
/* 发丝规则线 */
.rule        { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.rule-bold   { border: 0; border-top: 2px solid var(--text-1); margin: 0; }
.rule-accent { border: 0; border-top: 2px solid var(--accent); margin: 0; }

/* 大序号 / 统计数字：Space Grotesk，编辑感 */
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--text-1);
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--text-3);
}

/* 首字下沉（导语段落） */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  float: left;
  font-size: 3.4em;
  line-height: 0.78;
  padding: 0.05em 0.12em 0 0;
  color: var(--accent);
}

/* 编辑标签 / 徽章 */
.tag-editorial {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-label);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-2);
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

/* 纸面微噪点纹理（极淡，增加手工纸感，可选） */
.paper-grain {
  position: relative;
}
.paper-grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* 报头风分隔：双线 */
.rule-double {
  border: 0; height: 4px;
  border-top: 1px solid var(--text-1);
  border-bottom: 1px solid var(--text-1);
  margin: 0;
}

/* 页脚版本号 */
.footer-version {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 3px;
  text-decoration: none;
  margin-left: 2px;
  vertical-align: middle;
  transition: color 0.2s, background 0.2s;
}
.footer-version:hover {
  color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}