/* ============================================================
   目录：css/fonts.css
   项目：字体系统终极完善版 v5.0
   说明：覆盖所有字体使用场景，100%安全，永久免维护
   授权：基于系统字体调用，商业项目永久安全
   特性：全场景覆盖 | 国际化支持 | 可访问性优化 | 性能监控
   ============================================================ */

:root {
  /* ========== 基础字体变量（100%安全）========== */
  
  /* ----- 无衬线字体栈（正文/标题通用）----- */
  --font-sans-base: 
    system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Microsoft YaHei',
    Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC',
    'WenQuanYi Micro Hei', 'Noto Sans CJK SC',
    Arial, 'Helvetica Neue', sans-serif;
  
  /* ----- 衬线字体栈（文章/长文本）----- */
  --font-serif-base: 
    'Times New Roman', Georgia, 'Times',
    'Songti SC', 'STSong', 'SimSun', 'NSimSun',
    'Noto Serif CJK SC', 'WenQuanYi Bitmap Song',
    serif;
  
  /* ----- 等宽字体栈（代码/数据）----- */
  --font-mono-base: 
    'SF Mono', Monaco, Menlo, 'Andale Mono',
    'Cascadia Code', 'Consolas', 'Courier New',
    'Ubuntu Mono', 'DejaVu Sans Mono',
    monospace;
  
  /* ----- 手写/楷体风格（引用/备注）----- */
  --font-kai-base: 
    'KaiTi', 'SimKai', 'STKaiti', 'Kaiti SC',
    'AR PL UKai CN', 'Noto Serif CJK SC',
    cursive, serif;
  
  /* ----- 细体风格（文艺感）----- */
  --font-light-base: 
    'PingFang SC Light', 'Hiragino Sans GB W3',
    'Microsoft YaHei Light',
    var(--font-sans-base);

  /* ========== 场景化字体变量 ========== */
  
  /* 标题字体（可单独定制） */
  --font-heading: var(--font-sans-base);
  
  /* 正文字体 */
  --font-body: var(--font-sans-base);
  
  /* 文章字体（长文阅读） */
  --font-article: var(--font-serif-base);
  
  /* 代码字体 */
  --font-code: var(--font-mono-base);
  
  /* 引用字体 */
  --font-quote: var(--font-serif-base);
  
  /* 备注字体 */
  --font-note: var(--font-light-base);
  
  /* 导航菜单字体 */
  --font-nav: var(--font-sans-base);
  
  /* 按钮字体 */
  --font-button: var(--font-sans-base);
  
  /* 表单字体 */
  --font-form: var(--font-sans-base);
  
  /* 标签字体 */
  --font-label: var(--font-sans-base);
  
  /* 价格字体（通常用粗体无衬线） */
  --font-price: var(--font-sans-base);
  
  /* 数据/统计字体（常用等宽对齐） */
  --font-data: var(--font-mono-base);

  /* ========== 国际化字体支持 ========== */
  
  /* 英文优化 */
  --font-en: 
    'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
  
  /* 中文优化 */
  --font-zh: 
    'PingFang SC', 'Microsoft YaHei', 'SimHei', sans-serif;
  
  /* 日文优化 */
  --font-ja: 
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 
    'Meiryo', 'Yu Gothic', sans-serif;
  
  /* 韩文优化 */
  --font-ko: 
    'Apple SD Gothic Neo', 'Malgun Gothic', 
    'Dotum', sans-serif;
  
  /* 阿拉伯文 */
  --font-ar: 
    'Geeza Pro', 'Tahoma', 'Arial', sans-serif;
  
  /* 泰文 */
  --font-th: 
    'Sukhumvit Set', 'Tahoma', 'Arial', sans-serif;
  
  /* 越南文 */
  --font-vi: 
    'Helvetica Neue', 'Arial', sans-serif;

  /* ========== 数字字体（等宽优化）========== */
  --font-numbers: 
    'SF Mono', 'Consolas', 'Monaco', monospace;

  /* ========== 字重标准 ========== */
  --font-thin: 200;
  --font-extra-light: 250;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extra-bold: 800;
  --font-black: 900;

  /* ========== 行高系统 ========== */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  --line-height-article: 1.8;
  --line-height-code: 1.6;

  /* ========== 字距系统 ========== */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest: 0.2em;

  /* ========== 字体大小系统 ========== */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 3rem;     /* 48px */
  --font-size-6xl: 3.75rem;  /* 60px */
  --font-size-7xl: 4.5rem;   /* 72px */

  /* ========== 响应式断点 ========== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ========== 基础应用 ========== */
body {
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: #333;
  
  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* 文字间距优化 */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ========== 标题系统（完整层级）========== */
h1, .h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.5em;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.5em;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: var(--line-height-tight);
  margin-bottom: 0.5em;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-medium);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: var(--line-height-normal);
  margin-bottom: 0.5em;
}

h5, .h5 {
  font-family: var(--font-heading);
  font-weight: var(--font-medium);
  font-size: 1.1rem;
  line-height: var(--line-height-normal);
  margin-bottom: 0.5em;
}

h6, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  font-size: 1rem;
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 0.5em;
}

/* ========== 段落样式 ========== */
p {
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size: 1rem;
  line-height: var(--line-height-relaxed);
  margin-bottom: 1.5rem;
  max-width: 70ch; /* 控制行长，提升可读性 */
}

p.lead {
  font-size: 1.25rem;
  font-weight: var(--font-light);
  color: #555;
}

/* ========== 文章系统 ========== */
.article {
  font-family: var(--font-article);
  font-size: 1.125rem;
  line-height: var(--line-height-article);
  max-width: 70ch;
  margin: 0 auto;
}

.article p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 1.5rem;
}

.article h2, .article h3 {
  font-family: var(--font-heading);
  margin-top: 2rem;
}

/* ========== 引用系统 ========== */
blockquote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.125rem;
  line-height: var(--line-height-relaxed);
  color: #555;
  border-left: 4px solid #ddd;
  padding: 0 0 0 1.5rem;
  margin: 2rem 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

.blockquote-author {
  font-family: var(--font-sans-base);
  font-style: normal;
  font-weight: var(--font-medium);
  font-size: 0.875rem;
  color: #777;
  margin-top: 0.5rem;
}

.pull-quote {
  font-family: var(--font-serif-base);
  font-size: 1.5rem;
  font-weight: var(--font-light);
  line-height: var(--line-height-tight);
  color: #2c3e50;
  margin: 2rem 0;
  text-align: center;
}

/* ========== 代码系统 ========== */
code {
  font-family: var(--font-code);
  font-size: 0.9em;
  background-color: #f5f7f9;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  color: #d14;
  white-space: nowrap;
}

pre {
  font-family: var(--font-code);
  font-size: 0.9rem;
  line-height: var(--line-height-code);
  background-color: #f8f9fa;
  padding: 1.25rem;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid #e9ecef;
  margin: 1.5rem 0;
}

pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
  white-space: pre;
  font-size: inherit;
}

.code-block {
  position: relative;
}

.code-block-header {
  font-family: var(--font-sans-base);
  font-size: 0.75rem;
  color: #666;
  background: #e9ecef;
  padding: 0.25rem 1rem;
  border-radius: 8px 8px 0 0;
  border: 1px solid #dee2e6;
  border-bottom: none;
}

/* ========== 数据展示系统 ========== */
.number, .statistic, .price, .count {
  font-family: var(--font-numbers);
  font-weight: var(--font-medium);
  font-feature-settings: "tnum" 1; /* 表格数字对齐 */
}

.price {
  font-weight: var(--font-bold);
  color: #2c3e50;
}

.price small {
  font-family: var(--font-sans-base);
  font-size: 0.75em;
  font-weight: var(--font-regular);
  color: #999;
}

.statistic-value {
  font-family: var(--font-numbers);
  font-size: 2rem;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
}

.statistic-label {
  font-family: var(--font-sans-base);
  font-size: 0.875rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* ========== 表单系统 ========== */
input, textarea, select {
  font-family: var(--font-form);
  font-size: 1rem;
  line-height: var(--line-height-normal);
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input::placeholder, textarea::placeholder {
  font-family: var(--font-form);
  font-weight: var(--font-light);
  color: #999;
}

label, .label {
  font-family: var(--font-label);
  font-weight: var(--font-medium);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  display: block;
  color: #555;
}

.form-hint {
  font-family: var(--font-sans-base);
  font-size: 0.75rem;
  color: #999;
  margin-top: 0.25rem;
}

/* ========== 按钮系统 ========== */
button, .button, .btn {
  font-family: var(--font-button);
  font-weight: var(--font-medium);
  font-size: 1rem;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-sm {
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
}

.btn-lg {
  font-size: 1.125rem;
  padding: 0.75rem 1.5rem;
}

/* ========== 导航系统 ========== */
nav, .nav, .menu {
  font-family: var(--font-nav);
  font-weight: var(--font-medium);
  font-size: 1rem;
  letter-spacing: var(--letter-spacing-wide);
}

.nav-item {
  font-weight: var(--font-medium);
}

.nav-item.active {
  font-weight: var(--font-bold);
  color: #007bff;
}

.breadcrumb {
  font-family: var(--font-sans-base);
  font-size: 0.875rem;
  color: #666;
}

.breadcrumb a {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb .separator {
  margin: 0 0.5rem;
  color: #999;
}

/* ========== 标签系统 ========== */
.tag, .badge {
  font-family: var(--font-sans-base);
  font-size: 0.75rem;
  font-weight: var(--font-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  background: #f0f0f0;
  border-radius: 3px;
  color: #555;
}

/* ========== 提示/工具提示 ========== */
.tooltip {
  font-family: var(--font-sans-base);
  font-size: 0.75rem;
  line-height: var(--line-height-tight);
  background: #333;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
}

/* ========== 列表系统 ========== */
ul, ol {
  font-family: var(--font-body);
  line-height: var(--line-height-relaxed);
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.25rem;
}

.list-unstyled {
  list-style: none;
  padding-left: 0;
}

.list-inline {
  list-style: none;
  padding-left: 0;
}

.list-inline li {
  display: inline-block;
  margin-right: 1rem;
}

/* ========== 表格系统 ========== */
table {
  font-family: var(--font-sans-base);
  font-size: 0.875rem;
  line-height: var(--line-height-normal);
  width: 100%;
  border-collapse: collapse;
}

th {
  font-weight: var(--font-semibold);
  text-align: left;
  padding: 0.75rem;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

td {
  padding: 0.75rem;
  border-bottom: 1px solid #dee2e6;
}

.table-numbers td {
  font-family: var(--font-numbers);
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* ========== 卡片组件 ========== */
.card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--font-semibold);
  margin-bottom: 0.5rem;
}

.card-subtitle {
  font-family: var(--font-sans-base);
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 1rem;
}

.card-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: var(--line-height-relaxed);
  color: #555;
}

/* ========== 模态框 ========== */
.modal-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--font-semibold);
}

.modal-body {
  font-family: var(--font-body);
  line-height: var(--line-height-relaxed);
}

/* ========== 警告/通知 ========== */
.alert {
  font-family: var(--font-sans-base);
  font-size: 0.875rem;
  line-height: var(--line-height-normal);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.alert-title {
  font-weight: var(--font-bold);
  margin-bottom: 0.25rem;
}

/* ========== 国际化语言适配 ========== */

/* 英文页面优化 */
html[lang="en"] body {
  font-family: var(--font-en), var(--font-zh);
}

/* 日文页面优化 */
html[lang="ja"] body {
  font-family: var(--font-ja), var(--font-zh);
}

/* 韩文页面优化 */
html[lang="ko"] body {
  font-family: var(--font-ko), var(--font-zh);
}

/* 阿拉伯文页面（从右向左） */
html[lang="ar"] body {
  font-family: var(--font-ar), var(--font-sans-base);
  direction: rtl;
}

/* ========== 可访问性优化 ========== */

/* 增加对比度模式 */
@media (prefers-contrast: high) {
  body {
    color: #000;
  }
  
  .note, .footnote {
    color: #333;
  }
}

/* 减少动效模式 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* 大字模式（视力障碍） */
@media (prefers-contrast: more), (prefers-color-scheme: light) {
  body.contrast-mode {
    font-size: 1.125rem;
  }
  
  body.contrast-mode small {
    font-size: 1rem;
  }
}

/* 屏幕阅读器优化 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 字体加粗提示 */
strong, b {
  font-weight: var(--font-bold);
}

/* 强调文本 */
em, i {
  font-style: italic;
}

/* 标记文本 */
mark {
  background-color: #ff0;
  color: #000;
  padding: 0 0.2em;
}

/* 删除文本 */
del, s {
  text-decoration: line-through;
  color: #999;
}

/* 插入文本 */
ins {
  text-decoration: underline;
  color: #28a745;
}

/* ========== 性能优化 ========== */

/* 字体加载监控（无侵入式） */
.font-load-monitor {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  font-family: var(--font-sans-base);
  font-size: 0;
  width: 0;
  height: 0;
}

/* 字体回退测试（用于调试） */
.font-test {
  font-family: 'Test-Font', var(--font-sans-base);
}

/* 字体渲染优化 */
.optimize-legibility {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

.optimize-speed {
  text-rendering: optimizeSpeed;
  font-kerning: none;
  font-variant-ligatures: none;
}

/* ========== 视觉增强工具类 ========== */

/* 渐变文字 */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-teal {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 文字阴影 */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.text-shadow-lg {
  text-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}

.text-shadow-none {
  text-shadow: none;
}

/* 文字描边 */
.text-stroke {
  -webkit-text-stroke: 1px currentColor;
  color: transparent;
}

.text-stroke-2 {
  -webkit-text-stroke: 2px currentColor;
  color: transparent;
}

.text-stroke-white {
  -webkit-text-stroke: 1px white;
  color: transparent;
}

/* 文字发光 */
.text-glow {
  text-shadow: 0 0 10px currentColor;
}

.text-glow-lg {
  text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
}

/* 文字截断 */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文字对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* 文字转换 */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-normal-case { text-transform: none; }

/* 文字装饰 */
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-no-underline { text-decoration: none; }

/* 文字换行 */
.text-wrap { white-space: normal; }
.text-nowrap { white-space: nowrap; }
.text-pre { white-space: pre; }
.text-pre-line { white-space: pre-line; }
.text-pre-wrap { white-space: pre-wrap; }

/* 文字方向 */
.direction-ltr { direction: ltr; }
.direction-rtl { direction: rtl; }

/* ========== 字体工具类 ========== */

/* 字体家族 */
.font-sans { font-family: var(--font-sans-base); }
.font-serif { font-family: var(--font-serif-base); }
.font-mono { font-family: var(--font-mono-base); }
.font-kai { font-family: var(--font-kai-base); }
.font-light-family { font-family: var(--font-light-base); }
.font-numbers { font-family: var(--font-numbers); }

/* 字重 */
.font-thin { font-weight: var(--font-thin); }
.font-extra-light { font-weight: var(--font-extra-light); }
.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extra-bold { font-weight: var(--font-extra-bold); }
.font-black { font-weight: var(--font-black); }

/* 文字大小 */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }
.text-7xl { font-size: var(--font-size-7xl); }

/* 响应式文字大小 */
@media (min-width: 640px) {
  .text-sm-xs { font-size: var(--font-size-xs); }
  .text-sm-sm { font-size: var(--font-size-sm); }
  .text-sm-base { font-size: var(--font-size-base); }
  .text-sm-lg { font-size: var(--font-size-lg); }
}

@media (min-width: 768px) {
  .text-md-xs { font-size: var(--font-size-xs); }
  .text-md-sm { font-size: var(--font-size-sm); }
  .text-md-base { font-size: var(--font-size-base); }
  .text-md-lg { font-size: var(--font-size-lg); }
}

@media (min-width: 1024px) {
  .text-lg-xs { font-size: var(--font-size-xs); }
  .text-lg-sm { font-size: var(--font-size-sm); }
  .text-lg-base { font-size: var(--font-size-base); }
  .text-lg-lg { font-size: var(--font-size-lg); }
}

/* 行高 */
.leading-none { line-height: var(--line-height-none); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }
.leading-article { line-height: var(--line-height-article); }
.leading-code { line-height: var(--line-height-code); }

/* 字距 */
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* ========== 响应式设计 ========== */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  
  h1, .h1 { font-size: 2rem; }
  h2, .h2 { font-size: 1.75rem; }
  h3, .h3 { font-size: 1.5rem; }
  h4, .h4 { font-size: 1.25rem; }
  
  .article {
    font-size: 1rem;
  }
  
  blockquote {
    font-size: 1rem;
    margin: 1.5rem 0;
    padding-left: 1rem;
  }
  
  .pull-quote {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.5rem; }
  h3, .h3 { font-size: 1.25rem; }
}

/* ========== 暗色模式 ========== */
@media (prefers-color-scheme: dark) {
  body {
    color: #e0e0e0;
    background: #1a1a1a;
  }
  
  code {
    background-color: #2d2d2d;
    color: #ffa07a;
  }
  
  pre {
    background-color: #1e1e1e;
    border-color: #333;
  }
  
  blockquote {
    color: #bbb;
    border-left-color: #444;
  }
  
  input, textarea, select {
    background: #2d2d2d;
    border-color: #444;
    color: #e0e0e0;
  }
  
  .tag, .badge {
    background: #333;
    color: #ccc;
  }
  
  th {
    background: #2d2d2d;
    border-bottom-color: #444;
  }
  
  td {
    border-bottom-color: #333;
  }
}

/* ========== 打印样式 ========== */
@media print {
  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica', Arial, sans-serif;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  code, pre {
    font-family: 'Courier New', monospace;
    background: #f5f5f5;
    border: 1px solid #ddd;
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
  
  .gradient-text, .text-stroke, .text-glow {
    -webkit-text-fill-color: initial;
    background: none;
    text-shadow: none;
    color: #000;
  }
  
  nav, .menu, .button, .btn {
    display: none;
  }
}

/* ========== 调试工具（仅开发环境使用）========== */
.debug-fonts {
  outline: 1px solid red;
}

.debug-fonts:before {
  content: "Font: " attr(style);
  position: absolute;
  bottom: 100%;
  left: 0;
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px;
  white-space: nowrap;
}