/* ==========================================================================
   设计令牌 —— 工业实用方向
   暗色底层 + 发丝边框 + 等宽数字 + 单一锐利橙色强调
   所有颜色/间距/字号只能从这里取，组件内禁止硬编码
   ========================================================================== */

:root {
  /* --- 表面与文字 ------------------------------------------------------ */
  --color-bg: #0a0a0b;
  --color-bg-elevated: #111113;
  --color-surface: #131417;
  --color-surface-2: #1a1b1f;
  --color-text: #f4f2ed;
  --color-muted: #9a9a9f;
  /* 对比度实测 5.3:1，小字号标签也达标（原来的 #6b6b70 只有 3.6:1，不合格） */
  --color-faint: #85858a;

  /* 强调色：全站唯一，只给关键动作（加购、结账、当前态） */
  --color-accent: #ff4a1c;
  --color-accent-soft: rgba(255, 74, 28, 0.12);
  --color-accent-ink: #0a0a0b;

  /* 语义色 */
  --color-danger: #ff5f5f;
  --color-success: #4ade80;

  /* 边框：发丝线是这套视觉的骨架 */
  --color-line: rgba(244, 242, 237, 0.1);
  --color-line-strong: rgba(244, 242, 237, 0.24);

  /* --- 字体 ------------------------------------------------------------ */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* 模块化字阶 1.25 */
  --text-2xs: 0.6875rem; /* 11px 标签 */
  --text-xs: 0.75rem;    /* 12px 辅助 */
  --text-sm: 0.8125rem;  /* 13px 小字 */
  --text-base: 0.9375rem;/* 15px 正文 */
  --text-md: 1.0625rem;  /* 17px 引导文 */
  --text-lg: 1.375rem;   /* 22px 小节标题 */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.375rem;  /* 38px */
  --text-3xl: 3.25rem;   /* 52px */
  --text-hero: clamp(2.75rem, 7.2vw, 6.5rem);

  /* --- 间距梯度 -------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 140px;

  /* --- 形状与层高 ------------------------------------------------------ */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* --- 动效 ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* --- 布局 ------------------------------------------------------------ */
  --container: 1560px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 68px;
}

/* 备用：如果将来要加浅色模式，只覆盖语义令牌，组件代码不动 */
[data-theme="light"] {
  --color-bg: #f6f4ef;
  --color-bg-elevated: #ffffff;
  --color-surface: #eceae4;
  --color-surface-2: #e2dfd8;
  --color-text: #14130f;
  --color-muted: #58564f;
  --color-faint: #86837a;
  --color-line: rgba(20, 19, 15, 0.12);
  --color-line-strong: rgba(20, 19, 15, 0.28);
  --color-accent: #d63b12;
  --color-accent-ink: #ffffff;
}