/* ============================================================
   新中式 Apple 极简风 · 运行时 Design Tokens
   规范文件：design/east_saibo_style/tokens.css（两处需保持同步）
   只定义变量与 .ds-* 工具类，不直接改任何组件，避免一次性影响全站
   ============================================================ */
:root {
  color-scheme: light;
  --ds-bg: #F5F5F7;
  --ds-surface: #FFFFFF;
  --ds-surface-soft: #FAFAFB;
  --ds-brand: #9A2A2A;
  --ds-brand-hover: #802323;
  --ds-brand-soft: #F7EBEB;
  --ds-bronze: #4A5D4E;
  --ds-bronze-soft: #EDF1ED;
  --ds-ink: #1A1A1A;
  --ds-text-secondary: #6E6E73;
  --ds-text-tertiary: #A1A1A6;
  --ds-border: rgba(26, 26, 26, .08);
  --ds-pattern: rgba(74, 93, 78, .07);
  --ds-success: #38664A;
  --ds-warning: #95632D;
  --ds-error: #9A2A2A;

  --ds-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ds-font-display: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  --ds-text-hero: 32px;
  --ds-text-title: 24px;
  --ds-text-section: 18px;
  --ds-text-body: 14px;
  --ds-text-caption: 12px;
  --ds-leading-body: 1.6;

  --ds-radius-card: 20px;
  --ds-radius-field: 14px;
  --ds-radius-button: 999px;
  --ds-shadow-card: 0 4px 12px rgba(0, 0, 0, .05);
  --ds-shadow-floating: 0 12px 32px rgba(0, 0, 0, .08);
  --ds-focus-ring: 0 0 0 3px rgba(154, 42, 42, .22);

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-12: 48px;
  --ds-touch-target: 44px;
}

.ds-surface {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}

.ds-display {
  font-family: var(--ds-font-display);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ds-ink);
}

.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch-target);
  padding: 0 var(--ds-space-6);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-button);
  font: 600 var(--ds-text-body) var(--ds-font-ui);
  cursor: pointer;
}

.ds-button-primary { background: var(--ds-brand); color: #FFFFFF; }
.ds-button-primary:hover { background: var(--ds-brand-hover); }
.ds-button-secondary { background: var(--ds-brand-soft); color: var(--ds-brand); }
.ds-button:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

.ds-pattern-card { position: relative; isolation: isolate; overflow: hidden; }
.ds-pattern-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 42%;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, transparent 0 23px, var(--ds-pattern) 24px 25px, transparent 26px 48px),
    repeating-linear-gradient(-45deg, transparent 0 23px, var(--ds-pattern) 24px 25px, transparent 26px 48px);
  mask-image: linear-gradient(to right, transparent, #000);
}

/* ===================================================================
   主题变量（唯一变量源）· 方案 A「夜色微醺」W1
   -------------------------------------------------------------------
   浅色 = :root（现值不动），深色 = html[data-theme="dark"]。
   必须用 html[...] 而非 [data-theme]：styles.css 的 :root 在其之后引入，
   同为 (0,1,0) 特异性会被反压，html[...] 是 (0,1,1) 才能稳定胜出。

   --on-brand：品牌色之上的文字颜色。浅色主题朱砂底用白字，
   深色主题琥珀底必须换墨色字（琥珀 + 白字对比度不足，是"按钮发白廉价感"
   的直接来源）。原先散落在 ds-controls / ds-home 的 color:#fff 一律改用它。
   =================================================================== */

:root {
  --on-brand: #FFFFFF;
}

html[data-theme="dark"] {
  --on-brand: #15121A;

  /* ---- 旧体系（styles.css 在用，全站靠这 10 个变量支撑） ---- */
  --bg: #15121A;                        /* 墨紫，非纯黑（避开"近黑 + 荧光"套路） */
  --paper: #1E1A26;                     /* 卡片 / 面板 / 弹窗 */
  --ink: #F3EFEA;                       /* 主文字 */
  --muted: #A79FB0;                     /* 次要文字 */
  --wine: #E8A34A;                      /* 唯一强调色：琥珀 */
  --wine-soft: rgba(232, 163, 74, .14);
  --line: rgba(243, 239, 234, .10);
  --amber: #E8A34A;
  --amber-soft: rgba(232, 163, 74, .12);
  --green: #7FB08A;                     /* 进行中 / 成功 */
  --green-soft: rgba(127, 176, 138, .14);
  --radius: 18px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);

  /* ---- --ds-* 体系（ds-*.css 域样式在用） ---- */
  --ds-bg: #15121A;
  --ds-surface: #1E1A26;
  --ds-surface-soft: #262130;
  --ds-brand: #E8A34A;
  --ds-brand-hover: #F0B768;
  --ds-brand-soft: rgba(232, 163, 74, .14);
  --ds-bronze: #7FB08A;                 /* 原青铜，深色下改作"进行中"绿 */
  --ds-bronze-soft: rgba(127, 176, 138, .14);
  --ds-ink: #F3EFEA;
  --ds-text-secondary: #A79FB0;
  --ds-text-tertiary: #77707F;
  --ds-border: rgba(243, 239, 234, .10);
  --ds-pattern: rgba(232, 163, 74, .06);
  --ds-success: #7FB08A;
  --ds-warning: #E8A34A;
  --ds-error: #E8836F;

  /* 关键 anti-slop 动作：标题字族由 "Noto Serif SC" 改中文黑体 */
  --ds-font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --ds-radius-card: 18px;               /* 外 18 = 内 12 + padding，保持同心 */
  --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
  --ds-shadow-floating: 0 18px 48px rgba(0, 0, 0, .45);
  --ds-focus-ring: 0 0 0 3px rgba(232, 163, 74, .35);
}

@media (prefers-reduced-motion: reduce) {
  .ds-button { scroll-behavior: auto; transition: none; }
}