/* ============================================================
   海秦花 · 设计 Tokens  v3 —— 暖色系（橙/红/紫/棕/土黄/黄/灰/奶白）
   ------------------------------------------------------------
   约束（用户指定）：
     采用：橙色 红色 紫色 棕色 土黄色 黄色 灰色
     杜绝：白色 黑色 金色 银色 青色 木色
   v3 更新（用户追加）：底色允许「灰色 或 奶白色」→ 采奶白做主底色，
     灰系保留在次级面 / 描边 / 次级文字上（灰并未从色板里移除）。
   ------------------------------------------------------------
   落地规则（依据实测对比度，见下方注释）：
     · 底色一律用「奶白」；不用纯白。文字一律用「深棕」，不用纯黑。
     · 主按钮只能用 红 / 紫 / 棕（浅奶白字在其上 ≥6.8:1 达标）；
       橙 / 土黄 / 黄 做填充底时浅字仅 3.70 / 3.58 / 2.44 —— 不达标，
       因此它们**只做图标、描边、色块、淡底色**，不做承载文字的按钮底。
     · 全站无青色（无蓝/绿/青），语义色改由 土黄=成功 / 橙=警示 / 深红=错误 承担。
   ============================================================ */
:root {
  /* ---------- 中性：奶白 + 灰（替代白色） ---------- */
  --bg: #f7f2e8;        /* 页面底（奶白） */
  --paper: #fcf8f1;     /* 卡片 / 面板（浅奶白，兼作深色底上的浅字色） */
  --surface-2: #efe8db; /* 次级面（奶白偏灰） */
  --gray-100: #e7e2d8;  /* 灰（奶白调） */
  --gray-200: #d8d2c6;  /* 灰（深一档） */
  --brand-100: #f0deda; /* 选中淡底（红系淡） */
  --brand-050: #faf1ef; /* 极淡红 */
  --line: #cdc4b2;      /* 描边 / 分隔（1.55:1，非文字） */
  --line-soft: #e2dbcc;

  /* ---------- 文字：深棕系（替代黑色） ---------- */
  --ink-900: #3a2a20; /* 12.29:1  标题 */
  --ink-700: #52402f; /*  8.82:1  正文 */
  --ink-600: #6e5a47; /*  5.85:1  次要（次级面上 5.36:1） */
  --ink-500: #7b6a57; /*  4.66:1  占位符 / 大号次要（次级面上 4.26 仅大号） */

  /* ---------- 主色：绛红（CTA / 选中） ---------- */
  --brand-700: #6e1d17; /* 10.17:1 主色文字 */
  --brand-600: #85241c; /*  8.80:1 hover */
  --brand-500: #9e2d24; /*  6.59:1 主色底（浅字 6.95:1 达标） */

  /* ---------- 强调色（只做图标/描边/色块/淡底） ---------- */
  --purple: #6b3f6e;      /*  7.35:1  紫（可承载文字） */
  --purple-text: #5a3459; /*  更深紫，用于小字 */
  --purple-tint: #eae2ec;
  --brown: #6e4b2f;      /*  6.94:1  棕（可承载文字） */
  --brown-tint: #ece2d9;
  --orange: #c4682b;      /*  3.51:1  橙 —— 仅图标/描边/色块 */
  --orange-text: #9a4f1a; /*  5.37:1  橙系文字 */
  --orange-tint: #f7e4d5;
  --ochre: #a67c2e;       /*  3.39:1  土黄 —— 仅图标/描边/色块 */
  --ochre-text: #8a6a20;  /*  4.52:1  土黄系文字 */
  --ochre-tint: #f1e9d6;
  --yellow: #c99a2e;      /*  2.31:1  黄 —— 仅装饰色块，绝不承载文字 */
  --yellow-tint: #f7f0da;

  /* ---------- 语义色（无绿色可用，故用 土黄/橙/深红） ---------- */
  --success: var(--ochre);
  --success-text: var(--ochre-text); /* 4.52:1 */
  --success-bg: var(--ochre-tint);
  --warning: var(--orange);
  --warning-text: var(--orange-text); /* 5.37:1 */
  --warning-bg: var(--orange-tint);
  --danger: #8e1f1a;                  /* 7.97:1 */
  --danger-bg: #f0dad7;

  /* ---------- 字体 ---------- */
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;

  /* ---------- 圆角 ---------- */
  --r-card: 16px;
  --r-ctrl: 12px;
  --r-chip: 999px;
  --r-media: 12px;
  --r-modal: 20px;

  /* ---------- 阴影（奶白底上的暖调浅影，无厚重阴影） ---------- */
  --shadow-card: 0 1px 2px rgba(58, 42, 32, 0.06), 0 8px 24px rgba(58, 42, 32, 0.07);
  --shadow-pop: 0 8px 24px rgba(58, 42, 32, 0.14);
  --shadow-modal: 0 24px 64px rgba(58, 42, 32, 0.26);

  /* ---------- z-index 表 ---------- */
  --z-content: 0;
  --z-header: 100;
  --z-pop: 200;
  --z-tip: 300;
  --z-sheet-mask: 400;
  --z-sheet: 410;
  --z-modal-mask: 500;
  --z-modal: 510;
  --z-toast: 600;
  --z-record: 700;

  /* ---------- 动效 ---------- */
  --dur-micro: 140ms;
  --dur-std: 240ms;
  --dur-lg: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- 间距 ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --content-max: 1200px;
}

/* 字号阶梯 */
.t-display { font-size: clamp(34px, 4.2vw, 44px); line-height: 1.25; font-weight: 700; }
.t-h1      { font-size: clamp(28px, 3.2vw, 34px); line-height: 1.3;  font-weight: 700; }
.t-h2      { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3;  font-weight: 700; }
.t-h3      { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; font-weight: 500; }
.t-body    { font-size: clamp(15px, 1.05vw, 16px); line-height: 1.7; font-weight: 400; }
.t-small   { font-size: clamp(13px, 0.95vw, 14px); line-height: 1.65; }
.t-caption { font-size: 12px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}