/* ============================================
   DESIGN TOKENS —— 物化自 web-site/DESIGN.md
   修改前先改 DESIGN.md，再回来同步这里
   ============================================ */

:root {
  /* === 色板 === */
  --ink:        #0B0F1A;
  --ink-80:     #1B2030;
  --ink-60:     #5A6173;
  --ink-40:     #8A91A2;
  --ink-20:     #C7CCD8;
  --paper:      #FAFAF7;
  --paper-2:    #F2F1EB;
  --line:       #E6E4DA;
  --accent:     #FF5A1F;
  --accent-soft:#FFF1EB;
  --ok:         #1F8A55;
  --warn:       #C77700;
  --err:        #C0392B;

  /* === 字体 === */
  --font-cn:   "HarmonyOS Sans SC", "Noto Sans SC", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en:   "General Sans", "HarmonyOS Sans SC", "Noto Sans SC", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === 字号阶 === */
  --fs-display-xl: clamp(48px, 7vw, 92px);
  --fs-display-lg: clamp(40px, 5vw, 64px);
  --fs-display-md: clamp(32px, 3.6vw, 48px);
  --fs-h3:         32px;
  --fs-h4:         22px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-meta:       11px;

  /* === 间距 === */
  --sp-1:   2px;
  --sp-2:   4px;
  --sp-3:   8px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 96px;
  --sp-11:128px;

  /* === 布局 === */
  --max-w: 1240px;
  --pad-x: clamp(20px, 4vw, 40px);

  /* === 圆角 === */
  --r-sm:  6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* === 阴影 === */
  --shadow-sm: 0 1px 0 rgba(11,15,26,.04), 0 4px 16px -8px rgba(11,15,26,.08);
  --shadow-md: 0 1px 0 rgba(11,15,26,.05), 0 12px 32px -12px rgba(11,15,26,.18);

  /* === 动效 === */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-micro: 150ms;
  --dur-short: 250ms;

  color-scheme: light;
}

[data-theme="dark"] {
  --ink:        #F4F1E8;
  --ink-80:     #E0DCCE;
  --ink-60:     #9AA0AF;
  --ink-40:     #6A7184;
  --ink-20:     #2A3043;
  --paper:      #0B0F1A;
  --paper-2:    #141828;
  --line:       #222738;
  --accent:     #FF7244;
  --accent-soft:#2A1810;
  --shadow-sm: 0 1px 0 rgba(0,0,0,.4), 0 4px 16px -8px rgba(0,0,0,.6);
  --shadow-md: 0 1px 0 rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #F4F1E8;
    --ink-80:     #E0DCCE;
    --ink-60:     #9AA0AF;
    --ink-40:     #6A7184;
    --ink-20:     #2A3043;
    --paper:      #0B0F1A;
    --paper-2:    #141828;
    --line:       #222738;
    --accent:     #FF7244;
    --accent-soft:#2A1810;
    color-scheme: dark;
  }
}