/* ============================================================
 * base.css — 主题令牌 / Reset / 基础排版 / 可达性基线
 * 架构 §4.2（src/styles），M-13/M-14~20 全站引用
 * 引入顺序：base.css → layout.css → components.css → pages.css
 * 约束：纯原生 CSS；字体走 system-ui 栈（无外链 url()）；
 *       移动优先，断点见下表（CSS 变量不能用于 @media，
 *       各文件按此表书写 min-width 查询）
 * ------------------------------------------------------------
 * 断点表（移动优先，统一 min-width）：
 *   sm  40em  /  640px   手机横屏：双列网格、画廊箭头
 *   md  48em  /  768px   平板竖屏：导航展开、详情双栏
 *   lg  64em  / 1024px   平板横屏/小桌面：目录侧栏、admin 侧栏
 *   xl  80em  / 1280px   大桌面：目录四列、容器最大化
 * ============================================================ */

:root {
  color-scheme: light;

  /* ---- 暖陶土色板（锚色 #1c1a17 / #d9c8a9 / #8f8371）---- */
  --c-ink: #1c1a17;            /* 主墨色（页脚底、徽章底） */
  --c-ink-2: #2b2721;          /* 深墨：次级标题 */
  --c-ink-3: #40392f;          /* 墨阶三：正文强调 */
  --c-taupe: #8f8371;          /* 陶灰：辅助文字（锚色） */
  --c-sand: #d9c8a9;           /* 暖沙：深底上的主文字（锚色） */
  --c-sand-2: #e9dfc9;         /* 浅沙：分隔、浅底 */
  --c-paper: #f7f2e7;          /* 页面底色（陶纸） */
  --c-surface: #fdfaf3;        /* 卡片表面 */
  --c-surface-2: #f1e9d8;      /* 表面悬浮/输入底 */
  --c-line: #e2d7bf;           /* 发丝线 */
  --c-line-strong: #c9b995;    /* 输入/描边线 */
  --c-on-ink: #d9c8a9;         /* 深底上的主文字 */
  --c-on-ink-muted: #a89a80;   /* 深底上的辅助文字 */

  /* 陶土主色（CTA / 链接 / 焦点） */
  --c-accent: #b85c38;
  --c-accent-strong: #9a4826;
  --c-accent-deep: #7c391e;
  --c-accent-soft: #f3e0cf;
  --c-on-accent: #fff8ee;

  /* 语义色（暖调收敛，避免高饱和） */
  --c-success: #58763f;
  --c-success-strong: #476031;
  --c-success-soft: #e7ecdb;
  --c-warn: #a8781f;
  --c-warn-strong: #8a6212;
  --c-warn-soft: #f4e7c6;
  --c-danger: #a2402c;
  --c-danger-strong: #86331f;
  --c-danger-soft: #f3ddd4;
  --c-info: #5c7186;
  --c-info-soft: #e1e7ed;
  --c-muted-soft: #ece4d2;     /* 中性徽章底（expired/cancelled） */

  /* ---- 排版 ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.625rem, 1.2rem + 1.5vw, 2.125rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.5vw, 2.75rem);
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.65;

  /* ---- 间距（4px 基）---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ---- 圆角 / 阴影 / 层级 ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(28, 26, 23, 0.08), 0 2px 8px rgba(28, 26, 23, 0.06);
  --shadow-2: 0 4px 12px rgba(28, 26, 23, 0.12), 0 12px 32px rgba(28, 26, 23, 0.12);
  --z-header: 100;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---- 布局 ---- */
  --container-max: 72rem;
  --container-pad: 1rem;
  --header-h: 3.5rem;

  /* ---- 全站背景与毛玻璃（单一图源：换背景图只改此处）----
   * .site-background 与光斑层 .background-focus-fill（layout.css）共用本变量；
   * background-focus.js 运行时还会从 .site-background 读取实际图自动同步光斑。 */
  --site-bg-image: url('/res/background/background-hero.jpg');
  --glass-tint: rgba(253, 250, 243, 0.62);   /* 卡片玻璃底（陶纸半透明） */
  --glass-tint-2: rgba(241, 233, 216, 0.62); /* 次级玻璃底（surface-2 半透明） */
  --glass-blur: 6px;
  --glass-header-tint: rgba(247, 242, 231, 0.55);

  /* ---- 动效令牌（reduced-motion 时统一归零，见文件末尾）---- */
  --tr-fast: 140ms;
  --tr-base: 240ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-shimmer: 1600ms;
  --dur-fade-in: 180ms;
  --dur-toast-in: 220ms;
  --dur-modal-in: 200ms;
  --dur-drawer-in: 260ms;
}

/* ---- Reset ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--c-ink-3);
  background-color: var(--c-paper);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p,
figure,
dl,
dd {
  margin: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c-accent-strong);
  text-decoration: none;
  transition: color var(--tr-fast) var(--ease-out);
}

a:hover {
  color: var(--c-accent-deep);
  text-decoration: underline;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-block: var(--sp-5);
}

code,
kbd {
  font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  font-size: 0.9em;
  background: var(--c-surface-2);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

table {
  border-collapse: collapse;
}

/* hidden 属性必须压过任何 display 声明（组件显隐由 JS 属性控制） */
[hidden] {
  display: none !important;
}

/* ---- 可达性基线 ---- */

/* 键盘焦点环：链接/按钮/可聚焦容器；表单控件由组件层用焦点圈替换 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 供屏幕阅读器专用内容隐藏 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* ---- 动效偏好：全部经令牌归零，无需逐条 !important ---- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --tr-fast: 0s;
    --tr-base: 0s;
    --dur-shimmer: 0s;
    --dur-fade-in: 0s;
    --dur-toast-in: 0s;
    --dur-modal-in: 0s;
    --dur-drawer-in: 0s;
  }
}