/* ============================================================
   StellarU AI快读 · base.css — 设计令牌与基础排版
   风格：纸感温润 × 深墨绿绅士 × 琥珀金点缀 · 商业级移动端
   ============================================================ */
:root {
  /* —— 品牌色板（小程序设计系统延续，H5 强化）—— */
  --green-950: #0f3d22;
  --green-900: #14532d;
  --green-800: #166534;
  --green-700: #15803d;
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;

  /* 琥珀金 */
  --gold-600: #d97706;
  --gold-500: #f59e0b;
  --gold-400: #fbbf24;
  --gold-100: #fef3c7;
  --gold-50:  #fffbeb;

  /* 中性色（纸感） */
  --bg:        #f8f5ef;   /* 纸感米白 */
  --bg-soft:   #f1ede3;
  --surface:   #ffffff;
  --surface-2: #faf8f2;
  --ink-900:   #1c1917;
  --ink-700:   #44403c;
  --ink-500:   #78716c;
  --ink-400:   #a8a29e;
  --ink-300:   #d6d3d1;
  --line:      #e7e2d6;
  --line-soft: #efeae0;

  /* 语义色 */
  --danger:    #dc2626;
  --danger-bg: #fef2f2;
  --info:      #2563eb;
  --ok:        #16a34a;

  /* —— 渐变 —— */
  --grad-brand: linear-gradient(135deg, #14532d 0%, #166534 52%, #f59e0b 130%);
  --grad-green: linear-gradient(135deg, #166534 0%, #22c55e 100%);
  --grad-gold:  linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --grad-ink:   linear-gradient(135deg, #1c1917 0%, #57534e 100%);
  --grad-radial-gold: radial-gradient(120% 140% at 100% 0%, rgba(245,158,11,.16) 0%, rgba(245,158,11,0) 46%),
                      radial-gradient(140% 120% at 0% 100%, rgba(22,163,74,.10) 0%, rgba(22,163,74,0) 50%);

  /* —— 圆角 —— */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* —— 阴影 —— */
  --sh-xs: 0 1px 2px rgba(20, 83, 45, .06);
  --sh-sm: 0 2px 8px rgba(20, 83, 45, .06);
  --sh-md: 0 6px 24px rgba(20, 83, 45, .08);
  --sh-lg: 0 16px 48px rgba(20, 83, 45, .14);
  --sh-brand: 0 10px 30px rgba(22, 101, 52, .32);
  --sh-gold: 0 8px 24px rgba(245, 158, 11, .30);

  /* —— 字体 ——（中英文混排，回退到系统栈） */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC",
                STSong, SimSun, Georgia, serif;

  /* —— 字号阶梯（375 基准）—— */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-32: 32px;

  /* —— 间距 —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* —— 布局 —— */
  --tabbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --header-h: 56px;
  --content-max: 560px;

  /* —— 动效 —— */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .28s;
  --dur-fast: .18s;
  --dur-slow: .5s;

  /* 阅读器主题（随 JS 切换） */
  --reader-bg: #f6f1e6;
  --reader-ink: #2d2a26;
  --reader-line-h: 1.9;
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--bg);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit; font-size: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
input, select, textarea {
  font-family: inherit; font-size: inherit; color: inherit;
  background: none; border: 0; outline: none;
  -webkit-appearance: none; appearance: none;
}
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.35; }

/* ============ 排版工具 ============ */
.font-serif { font-family: var(--font-serif); }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ellipsis-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ellipsis-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hide { display: none !important; }
.gold-text { color: var(--gold-500); }
.green-text { color: var(--green-600); }
.ink-sub { color: var(--ink-500); }

/* 触摸反馈 */
.pressable { transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast), box-shadow var(--dur-fast); }
.pressable:active { transform: scale(.965); opacity: .9; }

/* 滚动条隐藏 */
::-webkit-scrollbar { width: 0; height: 0; }

/* 安全区助手 */
.safe-pb { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-5)); }

/* 系统字重微调：让中文在浅色底上更润 */
@media (min-width: 480px) {
  :root { --fs-32: 34px; }
}

/* ============================================================
   R4-P2 可访问性基础设施
   ============================================================ */

/* 仅读屏可见（隐藏实时播报节点等） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* 路由切换后主区域会被聚焦（便于读屏与键盘用户从页首开始浏览），
   容器本身不可交互，故不显示聚焦框 */
#view:focus, #view:focus-visible { outline: none; }

/* 键盘可见焦点：仅对键盘操作用户显示，鼠标/触摸点击不出现焦点圈。
   此前全站 `input,select,textarea{outline:none}` 且无任何焦点替代样式，
   键盘用户完全无法判断当前焦点位置（WCAG 2.4.7 不通过）。 */
:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.reader-screen :focus-visible,
.theme-bg-night :focus-visible { outline-color: var(--gold-500); }

/* 尊重系统「减少动态效果」偏好（WCAG 2.3.3） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 无 JS 兜底页 */
.noscript-tip {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 24px calc(48px + env(safe-area-inset-bottom, 0px));
  color: var(--ink-700);
  line-height: 1.8;
}
.noscript-tip h1 { font-size: var(--fs-22); margin-bottom: var(--sp-4); color: var(--ink-900); }
.noscript-tip p { margin-bottom: var(--sp-3); font-size: var(--fs-14); }