/* ==========================================================================
   DESIGN TOKENS — 唯一可修改的真实来源
   改这里，整站（含示例组件）同步变化。
   ========================================================================== */

:root {
  /* --- 色彩 / Color --------------------------------------------------- */
  /* 灰阶：冷调、非纯黑纯白。正文永远用 ink，不用 #000 */
  --c-gray-1000: #1d1d1f;
  --c-gray-900:  #37373a;
  --c-gray-800:  #48484c;
  --c-gray-700:  #6e6e73;
  --c-gray-600:  #86868b;
  --c-gray-500:  #a1a1a6;
  --c-gray-400:  #c7c7cc;
  --c-gray-300:  #d2d2d7;
  --c-gray-200:  #e8e8ed;
  --c-gray-100:  #f2f2f5;
  --c-gray-50:   #f8f8fa;
  --c-white:     #ffffff;

  --c-blue:   #0071e3;
  --c-blue-h: #0077ed;
  --c-blue-p: #0062c9;

  /* 品牌主色：#30D158（苹果 systemGreen 深色档） */
  --c-brand:   #30d158;
  --c-brand-h: #3fd564;
  --c-brand-p: #28b857;

  /* 成功色必须比主色深一档：主色已是绿，靠明度而非色相区分状态 */
  --c-green:   #20a24b;
  --c-amber:   #ff9f0a;
  --c-orange:  #ff9500;
  --c-red:     #ff3b30;
  --c-red-t:   #d70015;
  --c-purple:     #a25cff;
  --c-purple-ink: #7b3ff2;
  --c-teal:       #1ab7b0;

  --accent:    var(--c-brand);
  --accent-h:  var(--c-brand-h);
  --accent-p:  var(--c-brand-p);
  --accent-soft: rgba(48, 209, 88, .10);

  /* 角色分离：亮绿能当填充，不能当文字。
     --on-accent  = 主色填充之上；--accent-ink = 主色作为文字/描边 */
  --on-accent:  #062e13;
  --accent-ink: #0b7a37;
  --ok-ink:     #157a37;
  /* 主色作为描边/指示线：浅色主题取压深版，深色主题取提亮版 */
  --accent-edge: var(--accent-ink);

  /* 语义色（浅色主题） */
  --bg:          var(--c-white);
  --bg-elevated: var(--c-white);
  --bg-sunken:   var(--c-gray-50);
  --bg-brand:    #060608;
  --surface-1:   var(--c-gray-50);
  --surface-2:   var(--c-gray-100);
  --text:        var(--c-gray-1000);
  --text-2:      var(--c-gray-800);
  --text-3:      var(--c-gray-700);
  --text-inv:    var(--c-white);
  --line:        var(--c-gray-200);
  --line-strong: var(--c-gray-300);

  --ok:      var(--c-green);
  --warn:    var(--c-amber);
  --warn-ink: #8a5a00;
  --danger:  var(--c-red);
  --danger-t: var(--c-red-t);
  --on-danger: var(--c-white);

  /* --- 字体 / Typography ---------------------------------------------- */
  --font-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Inter, sans-serif;
  --font-mono: "SF Mono", ui-monospace, JetBrainsMono, Menlo, Consolas, monospace;

  /* 字号：4px 半步进阶，全站只用这 10 档 */
  --fs-xxs: 11px;
  --fs-xs:  12px;
  --fs-s:   13px;
  --fs-m:   15px;   /* 正文默认 */
  --fs-l:   17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 34px;
  --fs-5xl: 40px;
  --fs-6xl: 56px;
  --fs-7xl: 80px;

  /* 行高：字号越小行高越大（苹果的反直觉之处） */
  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.47;
  --lh-loose:  1.6;
  --lh-read:   1.72;

  /* 字距：大标题收紧，小标签放宽 */
  --tr-display: -0.021em;
  --tr-title:   -0.015em;
  --tr-body:    -0.01em;
  --tr-caption:  0.01em;
  --tr-eyebrow:  0.08em;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* --- 间距 / Spacing（8pt 栅格，禁止链外值） ------------------------- */
  --s-025: 2px;
  --s-050: 4px;
  --s-100: 8px;
  --s-150: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;   /* 区块最小纵向间距 */
  --s-1000: 120px;

  /* --- 圆角 / Radius（只允许 4 档 + pill） ---------------------------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* --- 阴影 / Elevation（只 3 级，永远不用黑色硬阴影） ---------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .04);
  --sh-2: 0 4px 16px rgba(0, 0, 0, .06);
  --sh-3: 0 16px 40px rgba(0, 0, 0, .10);
  --sh-4: 0 28px 70px rgba(0, 0, 0, .14);

  /* --- 动效 / Motion -------------------------------------------------- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);   /* 进场 / 默认 */
  --ease-in-out: cubic-bezier(.65, .05, .36, 1); /* 位移 */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 仅限一处 */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 340ms;
  --dur-enter: 480ms;   /* 上限，超过即浮躁 */

  /* --- 尺寸 / Sizing -------------------------------------------------- */
  --h-control-xs: 28px;
  --h-control-sm: 32px;
  --h-control-md: 40px;
  --h-control-lg: 48px;
  --h-control-xl: 56px;

  --container: 1200px;
  --prose: 680px;      /* 正文最优行长 ≈ 75 字符 */
  --nav-w: 244px;
}

/* --- 深色主题：同名令牌换值，组件代码零改动 ------------------------------ */
[data-theme="dark"] {
  --bg:          #000000;
  --bg-elevated: #1c1c1e;
  --bg-sunken:   #161618;
  --bg-brand:    #f5f5f7;
  --surface-1:   #1c1c1e;
  --surface-2:   #2c2c2e;
  --text:        #f5f5f7;
  --text-2:      #b0b0b8;
  --text-3:      #86868b;
  --text-inv:    #000000;
  --line:        #38383a;
  --line-strong: #48484a;

  --accent:    #30d158;
  --accent-h:  #4ade72;
  --accent-p:  #26af4b;
  --accent-soft: rgba(48, 209, 88, .18);

  /* 纯黑底上，深绿不可读；成功色改用更冷的薄荷绿与主色拉开色相 */
  --c-green:   #34d399;

  /* 深色主题下方向相反：作为文字的强调色必须提亮 */
  --on-accent:  #052e12;
  --accent-ink: #4ade72;
  --ok-ink:     #34d399;
  --accent-edge: var(--accent);

  --c-gray-1000: #f5f5f7;
  --c-purple-ink: #b78cff;

  --danger-t: #ff453a;
  --warn-ink: #ffb340;
  --on-danger: #000000;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 4px 16px rgba(0, 0, 0, .5);
  --sh-3: 0 16px 40px rgba(0, 0, 0, .55);
  --sh-4: 0 28px 70px rgba(0, 0, 0, .65);
}