/*
 * base.css —— 设计系统基础层
 * 变量、排版、按钮、输入框、卡片、图标尺寸、通用工具类。
 * 色值只在这里定义，其余样式表一律引用变量，不新增色值。
 */
:root {
  /* 五个基础色（design/README.md#visual），只允许改透明度，不新增色相 */
  --paper: #F7F5EF;   /* 米白：全局背景 */
  --green: #35594B;   /* 松绿：主按钮、选中态、导航激活 */
  --ink: #292E2A;      /* 深灰：标题、正文 */
  --warm: #A4A69C;     /* 暖灰：分隔线、边框、禁用态 */
  --clay: #BB775D;     /* 陶土：少量地点与旅行装饰、陶土文字链接 */

  --card-bg: #FFFFFF;
  --hairline: rgba(41, 46, 42, 0.12);
  --hairline-strong: rgba(41, 46, 42, 0.18);
  --muted: rgba(41, 46, 42, 0.72);
  --danger: var(--clay);
  --focus: #8a4a2c;

  --serif: "Noto Serif SC", "Source Han Serif SC", SimSun, serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  --radius: 8px;
  --radius-lg: 12px;
  --radius-photo: 6px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.8 var(--sans);
}
body { min-height: 100vh; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; }
a { color: var(--green); text-decoration: none; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
svg.icon { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 换题后把焦点移到题干是给读屏用的，标题本身不可操作，不画可见焦点框 */
h1[tabindex="-1"]:focus-visible { outline: none; }

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
h1 { font-size: 44px; line-height: 1.25; }
h3 { font-size: 20px; line-height: 1.4; margin-bottom: 12px; }
p { margin: 0 0 var(--space-3); }

.lead { color: var(--muted); font-size: 16px; margin: 0 0 var(--space-5); }
.hint { color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-size: 14px; }
.lock { color: var(--muted); font-size: 14px; margin-top: var(--space-2); display: flex; align-items: center; gap: 6px; }
.center { text-align: center; }
.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;
}

/* ---- 按钮：主按钮 / 次按钮 / 陶土文字链接 / 跳过链接 ---- */
.btn,
.btn-primary,
.btn-ghost,
.btn-secondary,
.btn-text,
.link-clay,
.link-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  height: 48px;
  border-radius: var(--radius);
  padding: 0 20px;
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}
.btn, .btn-primary {
  background: var(--green);
  color: var(--paper);
  border-color: var(--green);
  font-weight: 600;
}
.btn:disabled, .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ghost, .btn-secondary {
  background: var(--card-bg);
  border-color: var(--warm);
  color: var(--ink);
}
.btn-text, .link-clay {
  height: auto; min-height: 44px; padding: 8px 4px;
  background: none; border: 0;
  color: var(--clay);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 15px;
}
.link-skip {
  height: auto; min-height: 44px; padding: 8px 4px;
  background: none; border: 0;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 15px;
}
.btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ---- 表单控件 ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.field label { font-size: 14px; color: var(--ink); }
.field input,
.field textarea,
.field select,
input[type="text"],
input[type="password"],
input:not([type]) {
  border: 1px solid var(--warm);
  border-radius: var(--radius);
  padding: 0 14px;
  background: var(--card-bg);
  height: 48px;
  width: 100%;
}
.field textarea, textarea { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; width: 100%; }
input:focus, textarea:focus, select:focus { border-color: var(--green); }

/* ---- 卡片 ---- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--warm);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* ---- 通用小组件 ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(53, 89, 75, 0.1);
  color: var(--green);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}