/* =============================================================
   BASE — 全局重置、设计 Token、通用工具类
   顺序：1. CSS 变量  2. 全局重置  3. 工具类
   ============================================================= */

/* ─── 1. 设计 Token ─────────────────────────────────────────── */
:root {
  /* 背景层次 */
  --bg:             rgba(245, 247, 250, 1);
  --panel:          rgba(255, 255, 255, 0.88);
  --panel-solid:    #ffffff;
  --panel-border:   rgba(255, 255, 255, 0.8);
  --surface-muted:  rgba(250, 250, 250, 1);
  --surface-soft:   #fafbfc;
  --surface-strong: #f7f9fb;

  /* 文字层次 */
  --text:       rgba(15, 20, 25, 1);
  --text-muted: #4b5563;
  --subtext:    #6b7280;

  /* 线条 */
  --line:      rgba(15, 20, 25, 0.08);
  --line-soft: #edf2f7;
  --line-muted:#f1f5f9;

  /* 品牌色 */
  --brand:      rgba(253, 169, 86, 1);
  --brand-strong: #ff7d2e;
  --brand-soft:   #fff1e8;
  --brand-line:   rgba(26, 26, 26, 0.08);

  /* 功能色 */
  --green:        rgba(22, 185, 152, 1);
  --green-bg:     rgba(65, 183, 140, 0.05);
  --green-border: rgba(65, 183, 140, 0.2);
  --blue:         #4a7cff;

  /* 阴影 / 焦点环 */
  --shadow:     0px 15px 40px 0px rgba(15, 23, 41, 0.06);
  --focus-ring: 0 0 0 3px rgba(74, 124, 255, 0.18);

  /* 布局尺寸 */
  --topbar-height:  68px;
  --topbar-offset:  16px;   /* topbar 底部到内容区顶部的间距 */
  --sticky-offset:  calc(var(--topbar-height) + var(--topbar-offset));

  /* 圆角 */
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
}

/* ─── 2. 全局重置 ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: PingFangSC-Regular, Roboto, "Helvetica Neue", Helvetica,
               Tahoma, Arial, "PingFang SC-Light", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Retina 屏：全局图片高质量渲染 */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 让表单控件继承 body 字体，避免浏览器默认字体覆盖 */
button,
input,
textarea,
select {
  font: inherit;
}

/* 清除 button 默认 outline，统一由 :focus-visible 处理 */
button {
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ─── 3. 工具类 ─────────────────────────────────────────────── */

/* 仅供屏幕阅读器使用，视觉上隐藏 */
.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;
}