/* ============================================================================
   tokens.css —— 设计令牌，全站视觉的唯一真相源
   吾与狗 · 长沙宠物洗护

   ⚠️ 改颜色前先读这段对比度实测结果，否则很容易踩无障碍坑：

     组合                          比值      结论
     #1F2421 on #FAF8F4          14.86:1   AAA，正文
     #2F5D50 on #FAF8F4           7.06:1   AAA，标题 / 链接
     #FFFFFF on #2F5D50           7.49:1   AAA，主按钮
     #1F2421 on #C8A97E           7.08:1   金色作【背景】可用
     #C8A97E on #FAF8F4           2.10:1   ❌ 不达标
     #C8A97E on #2F5D50           3.37:1   ⚠️ 仅大字号 / UI 边界

   一句话：浅金 --color-accent 在浅底上连大字号 3:1 都过不了，
   它只能做装饰 —— 描边、分隔线、图标点缀、以及作为深色文字的【背景】。
   永远不要用它给浅底上的文字上色，也不要用它写价格。
   ========================================================================== */

:root {
  /* --- 品牌色 ------------------------------------------------------------ */
  --color-bg:         #FAF8F4;  /* 米白，页面底色 */
  --color-surface:    #FFFFFF;  /* 卡片、表单底色 */
  --color-ink:        #1F2421;  /* 近黑，正文 */
  --color-muted:      #5C6660;  /* 次要文字，在米白上约 5.3:1 */
  --color-primary:    #2F5D50;  /* 墨绿，主色 */
  --color-primary-600:#264C41;  /* 墨绿加深，hover / active */
  --color-primary-050:#EAF0ED;  /* 墨绿极浅，选中态底纹 */
  --color-accent:     #C8A97E;  /* 浅金 —— 见文件头，仅装饰 */
  --color-border:     #E7E2D8;  /* 描边 */
  --color-border-soft:#F0ECE3;  /* 更轻的分隔线 */

  /* --- 语义色（表单反馈） ------------------------------------------------ */
  --color-danger:     #A8322B;  /* 在米白上约 6.4:1 */
  --color-danger-bg:  #FBEEEC;
  --color-success:    #2C6A4F;
  --color-success-bg: #EAF3EE;

  /* --- 字体 --------------------------------------------------------------
     纯系统字体栈，不加载任何 webfont：
     中文字体文件动辄 3–8MB，国内首屏必卡；而苹方 / 微软雅黑 / 思源黑本身
     质量已足够。同时也回避了 Google Fonts（被墙）与公共 CDN 依赖。
     ---------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;

  /* --- 流体排版 ----------------------------------------------------------
     用 clamp() 让字号随视口平滑变化，减少对断点的依赖。
     ---------------------------------------------------------------------- */
  --fs-h1:      clamp(2rem, 5vw + 1rem, 3.75rem);
  --fs-h2:      clamp(1.5rem, 2.5vw + .75rem, 2.5rem);
  --fs-h3:      clamp(1.125rem, .5vw + 1rem, 1.375rem);
  --fs-lead:    clamp(1rem, .4vw + .9rem, 1.1875rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .8125rem;

  --lh-tight:   1.25;
  --lh-body:    1.75;   /* 中文正文需要比西文更松的行高 */

  /* --- 间距与布局 -------------------------------------------------------- */
  --space-section: clamp(4rem, 8vw, 7.5rem);
  --space-lg:      clamp(2rem, 4vw, 3rem);
  --space-md:      1.5rem;
  --space-sm:      1rem;
  --space-xs:      .5rem;

  --container:     1200px;
  --gutter:        clamp(1rem, 4vw, 2rem);

  /* --- 圆角与阴影 -------------------------------------------------------- */
  --radius:        14px;
  --radius-sm:     8px;
  --radius-pill:   999px;

  --shadow-sm: 0 1px 2px rgb(31 36 33 / .06);
  --shadow-md: 0 12px 32px -12px rgb(31 36 33 / .18);
  --shadow-lg: 0 24px 60px -20px rgb(31 36 33 / .24);

  /* --- 高度与动效 -------------------------------------------------------- */
  --header-h:        72px;
  --header-h-mobile: 64px;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  140ms;
  --dur-base:  260ms;

  /* 固定浅色品牌基调，不跟随系统深色模式 */
  color-scheme: light;
}

/* 锚点跳转时留出吸顶导航的高度，否则标题会被导航盖住 */
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}