/* ============================================================
 * tokens.css — 全站设计令牌（唯一变量来源）
 * 主色 #E07A5F 陶土橘；断点 --bp-md:768px / --bp-lg:1200px
 * 注意：@media 不支持 var()，媒体查询中需写断点字面量（769/1201）
 * ============================================================ */

:root {
  /* —— 色板 —— */
  --color-primary: #E07A5F;            /* 陶土橘（主） */
  --color-primary-strong: #C96449;     /* 悬停/强调 */
  --color-primary-deep: #A34A33;       /* 按压/深态 */
  --color-primary-soft: rgba(224, 122, 95, 0.14);
  --color-on-primary: #FFFFFF;
  --color-accent: #3D6B64;             /* 沉静青绿（辅助） */
  --color-accent-soft: rgba(61, 107, 100, 0.12);
  --color-bg: #FBF6F1;                 /* 暖米白页面底 */
  --color-bg-alt: #F3EAE2;             /* 间隔区底 */
  --color-surface: #FFFFFF;            /* 卡片面 */
  --color-ink: #2C2622;                /* 正文 */
  --color-ink-soft: #6E6259;           /* 次级文字 */
  --color-ink-faint: #9A8D84;          /* 弱化文字 */
  --color-line: #E8DBD1;               /* 描边 */
  --color-hero-ink: #FFF8F4;           /* Hero 亮底文字 */
  --color-footer-bg: #2C2622;
  --color-footer-ink: #EDE4DC;
  --color-footer-soft: #A79A8F;
  --color-ok: #3E7C4F;
  --color-ok-soft: rgba(62, 124, 79, 0.12);
  --color-danger: #B3402F;
  --color-danger-soft: rgba(179, 64, 47, 0.10);

  /* —— 圆角 —— */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* —— 间距（4px 基数） —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-section: 88px;

  /* —— 字号 —— */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-hero: clamp(2.1rem, 5.2vw, 3.4rem);

  /* —— 字体 —— */
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  /* —— 阴影 —— */
  --shadow-1: 0 2px 10px rgba(44, 38, 34, 0.06);
  --shadow-2: 0 12px 32px rgba(44, 38, 34, 0.14);
  --shadow-primary: 0 8px 24px rgba(224, 122, 95, 0.35);

  /* —— 布局 —— */
  --container-max: 1200px;
  --gutter: 24px;
  --header-height: 64px;

  /* —— 层级 —— */
  --z-header: 100;
  --z-menu: 110;

  /* —— 动效 —— */
  --motion-duration: 0.6s;
  --motion-ease: ease;
  --transition-fast: 0.18s ease;

  /* —— 断点（与 layout.css 媒体查询字面量保持同步） —— */
  --bp-md: 768px;
  --bp-lg: 1200px;
}