/* ==========================================================================
   tokens.css · 向日葵专注 SunFocus 官网设计令牌唯一来源
   版本 v1.0 ｜ 规范见 docs/design-spec.md
   ⚠ 本文件不得引入任何外链（字体 / 图标 / CDN）；所有值均为实测值。
   ========================================================================== */

:root {
  /* ======================================================================
     1. 色彩 · 品牌（暖黄 → 橙，取自 App 图标与阳光币）
     ====================================================================== */
  --c-brand:              #F5A623; /* 品牌识别色｜配 --c-text 7.77:1 ✓｜⚠禁配白字 2.03:1 */
  --c-brand-600:          #E8871E; /* 装饰橙｜⚠禁作文字底 2.65:1 */
  --c-brand-strong:       #C2410C; /* 主按钮实底/链接/强调文字｜配白 5.18:1 ✓ */
  --c-brand-hover:        #A8390A; /* 主按钮 hover｜配白 6.45:1 ✓ */
  --c-brand-active:       #96330A; /* 主按钮 active｜配白 7.57:1 ✓ */
  --c-brand-ink:          #8A4B0F; /* 深橙文字版｜配 --c-bg 6.57:1 ✓ */
  --c-brand-soft:         #FFF3DC; /* 暖黄浅底（#trust / #download） */
  --c-brand-tint:         #FFF6E4; /* 孩子线栏壳底 */
  --c-sun-soft:           #FFF9E8; /* #hero 渐变顶端 */

  /* ======================================================================
     2. 色彩 · 辅色（草绿，取自花园背景）
     ====================================================================== */
  --c-accent:             #3F8F2E; /* 生长语义图形｜⚠仅 ≥24px 大字与纯图形 3.93–4.05:1 */
  --c-accent-strong:      #35761F; /* 需可读的绿｜配白 5.58:1 ✓ */
  --c-accent-ink:         #2F6B25; /* 深绿文字｜配 --c-bg 6.26:1 ✓ */
  --c-accent-soft:        #F0F7EA; /* #garden 区块底 */
  --c-accent-line:        #DCE9D2; /* 花园卡描边（装饰） */

  /* ======================================================================
     3. 色彩 · 中性（奶油白 / 暖灰 / 深栗）
     ====================================================================== */
  --c-bg:                 #FFFBF2; /* 页面主底色｜配 --c-text 15.25:1 ✓ */
  --c-surface:            #FFFFFF; /* 卡片/面板/抽屉底｜配 --c-text 15.75:1 ✓ */
  --c-surface-warm:       #FFF3DC; /* 暖黄浅底区块｜配 --c-text 14.33:1 ✓ */
  --c-surface-neutral:    #F4F1EA; /* 家长线栏壳底｜配 --c-text 13.96:1 ✓ */
  --c-surface-sunken:     #F2EFE8; /* 下沉底：chip / 只读框｜配 --c-text 13.71:1 ✓ */
  --c-surface-dark:       #2A2118; /* 全站唯一深色底：#footer｜配 #FFFBF2 15.30:1 ✓ */

  --c-text:               #2B2118; /* 正文（暖黑）｜15.25:1 ✓ AAA */
  --c-text-muted:         #6B5F52; /* 次要文字｜5.40–6.21:1 ✓ AA */
  --c-text-subtle:        #7A6C5C; /* 14px 以下极小说明｜4.93:1 ✓ AA */
  --c-text-disabled:      #A39A8C; /* 禁用态｜2.42:1（WCAG 豁免，须附文字说明） */
  --c-text-inverse:       #FFFBF2; /* 深色底反白｜15.30:1 ✓ */
  --c-text-inverse-muted: #C9BBAA; /* 深色底次要文字｜8.41:1 ✓ */

  --c-border:             #EADFCB; /* 装饰性分隔/描边 1px｜不承担信息传递 */
  --c-border-strong:      #D8C8A8; /* 装饰性强调描边 */
  /* 以下两枚为 design-spec 组件表内已写死、但令牌总表未命名的值，补齐令牌以免 main.css 出现色值字面量：
     --c-brand-line  ← design-spec §7.4 `.card--warm` 边框色
     --c-surface-press ← design-spec §7.9 商店 chip 的 active 底色 */
  --c-brand-line:         #F0E0BF; /* 暖色卡描边（装饰） */
  --c-surface-press:      #E4DCCB; /* chip active 下沉底 */
  --c-border-input:       #9C8555; /* 可交互控件边界｜3.45–3.56:1 ✓ */
  --c-border-input-hover: #6B5F52; /* 输入框 hover｜6.01:1 ✓ */
  --c-border-dashed:      #C9B894; /* chip 虚线描边（未上架语义） */

  /* ======================================================================
     4. 色彩 · 语义
     ====================================================================== */
  --c-success:            #2E7D32; /* 配白 5.13:1 ✓ */
  --c-success-soft:       #EDF7E9; /* 其上配主色 4.66:1 ✓ */
  --c-warn:               #B45309; /* 配白 5.02:1 ✓ */
  --c-warn-soft:          #FDF3E3; /* 其上配主色 4.57:1 ✓ */
  --c-danger:             #B3261E; /* 配白 6.54:1 ✓ */
  --c-danger-soft:        #FCE9E7; /* 其上配主色 5.59:1 ✓ */
  --c-info:               #2563A8; /* 配白 6.12:1 ✓ */
  --c-info-soft:          #E9F1FA; /* 其上配主色 5.37:1 ✓ */

  /* ======================================================================
     5. 色彩 · 焦点
     ====================================================================== */
  --c-focus:              #0F172A; /* 浅色底与两个品牌按钮上｜3.45–17.85:1 ✓ */
  --c-focus-inverse:      #FFD166; /* 仅 #footer 深栗底内｜10.96:1 ✓ */
  --c-select-bg:          #F5A623; /* 文本选中底（配 --c-text 7.77:1 ✓） */
  --c-select-fg:          #2B2118;
  --c-scrim:              rgba(43, 33, 24, .32); /* 抽屉遮罩 */

  /* ======================================================================
     6. 字体
     ====================================================================== */
  --ff-base: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --ff-num:  "SF Mono", Menlo, Consolas, "PingFang SC", monospace;

  /* 字号（桌面基准 ≥1024px） */
  --fs-h1:       56px;
  --fs-h2:       40px;
  --fs-h3:       24px;
  --fs-h4:       19px;
  --fs-lead:     18px;
  --fs-lead-lg:  20px;  /* 仅 #what 一句话定位 */
  --fs-body:     16px;
  --fs-caption:  14px;
  --fs-micro:    13px;
  --fs-btn:      16px;
  --fs-label:    14px;
  --fs-eyebrow:  14px;
  --fs-num:      28px;

  /* 行高 */
  --lh-h1:       1.12;
  --lh-h2:       1.20;
  --lh-h3:       1.35;
  --lh-h4:       1.45;
  --lh-lead:     1.75;
  --lh-body:     1.75;
  --lh-caption:  1.60;
  --lh-micro:    1.50;
  --lh-btn:      1.00;
  --lh-footer:   2.20;  /* 页脚链接行高，保证 ≥44px 触控高度 */

  /* 字重 */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* 字距 */
  --ls-h1:      -0.01em;
  --ls-h2:      -0.005em;
  --ls-normal:  0;
  --ls-btn:     0.01em;
  --ls-label:   0.02em;
  --ls-eyebrow: 0.08em;

  /* ======================================================================
     7. 间距（4px 基准，任何 spacing 值必须是这些之一）
     ====================================================================== */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  /* ======================================================================
     8. 布局
     ====================================================================== */
  --w-shell:            1200px; /* 容器最大宽（宽屏也封顶，不无限拉伸） */
  --w-text:             720px;  /* 正文段落最大宽 */
  --w-text-narrow:      640px;  /* 通栏说明文字最大宽 */
  --w-prose:            820px;  /* #pain 卡片组最大宽 */
  --w-faq:              800px;
  --w-hero-copy:        576px;
  --pad-x:              24px;   /* 容器两侧安全边距 */
  --pad-x-mobile:       20px;
  --pad-x-tight:        16px;   /* ≤375px */
  --grid-cols:          12;
  --grid-cols-mobile:   4;
  --grid-gutter:        24px;
  --grid-gutter-mobile: 16px;

  /* 区块纵向节奏 */
  --sec-y:              96px;   /* 桌面前后区块 */
  --sec-y-lg:           128px;  /* 桌面大区块 */
  --sec-y-mobile:       64px;   /* 移动 */
  --sec-y-hero-mobile:  48px;

  /* 导航与固定元素 */
  --nav-h:              64px;
  --nav-h-mobile:       56px;
  --mobile-cta-h:       72px;
  --scroll-margin:      80px;   /* = --nav-h + 16px；移动端覆盖为 72px */

  /* ======================================================================
     9. 圆角（全站无锐角，最小 8px）
     ====================================================================== */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   20px;   /* 默认卡片 */
  --r-xl:   28px;   /* 大面板/栏壳 */
  --r-2xl:  36px;   /* 手机样机 / 花园大图框 */
  --r-pill: 999px;  /* 全部按钮 / chip / 眉标 */

  /* ======================================================================
     10. 描边
     ====================================================================== */
  --bw-hairline:  1px;
  --bw-control:   1px;
  --bw-strong:    1.5px;
  --bw-focus:     3px;
  --bw-underline: 3px;

  /* ======================================================================
     11. 阴影（暖调，不用纯黑；插画 3D 感由资产提供，界面只做一档柔光）
     ====================================================================== */
  --sh-xs:           0 1px 2px rgba(43, 33, 24, .06);
  --sh-sm:           0 1px 2px rgba(43, 33, 24, .04), 0 2px 8px rgba(43, 33, 24, .06);
  --sh-md:           0 2px 6px rgba(43, 33, 24, .04), 0 8px 24px rgba(43, 33, 24, .08);
  --sh-lg:           0 4px 12px rgba(43, 33, 24, .05), 0 16px 40px rgba(43, 33, 24, .10);
  --sh-brand:        0 6px 16px rgba(194, 65, 12, .28);
  --sh-brand-hover:  0 10px 24px rgba(194, 65, 12, .34);
  --sh-inset-hi:     inset 0 1px 0 rgba(255, 255, 255, .60); /* 软塑感高光 */

  /* ======================================================================
     12. 动效
     ====================================================================== */
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
  --dur-toast: 3200ms; /* Toast 存活时长 */
  --ease-out:     cubic-bezier(.22, .61, .36, 1);
  --ease-inout:   cubic-bezier(.4, 0, .2, 1);
  --ease-spring:  cubic-bezier(.34, 1.40, .64, 1);
  --t-hover:      160ms;
  --reveal-lift:  16px;  /* 标题滚动淡入位移 */
  --reveal-lift-card: 20px;
  --reveal-stagger: 60ms;

  /* ======================================================================
     13. 层级
     ====================================================================== */
  --z-base:        1;
  --z-nav:         100;
  --z-mobile-cta:  150;
  --z-drawer:      200;
  --z-toast:       300;
  --z-skip-link:   400;

  /* ======================================================================
     14. 组件级令牌（避免前端在组件里写魔数）
     ====================================================================== */
  --btn-h:            52px;
  --btn-h-sm:         44px;  /* 触控最小尺寸 / 导航小 CTA */
  --btn-px:           32px;
  --btn-px-sm:        20px;
  --btn-min-w:        200px;
  --card-pad:         24px;
  --card-pad-mobile:  16px;
  --card-gap:         32px;
  --summary-h:        64px;
  --chip-h:           52px;
  --chip-min-w:       220px;
  --thumb-size:       80px;
  --thumb-size-mobile:72px;
  --garden-figure-h:  400px;
  --garden-figure-h-tablet: 384px;
  --garden-figure-h-mobile: 368px;
  --phone-w:          324px;
  --phone-h:          702px;   /* 324 × 19.5/9 ≈ 702（9:19.5 竖版屏） */
  --phone-bezel:      12px;
  --toast-max-w:      420px;
  --toast-bottom:     32px;
  --toast-bottom-mobile: 88px;
  --icon-size:        24px;
  --icon-size-sm:     20px;
  --icon-stroke:      2;
}

/* ==========================================================================
   移动端令牌覆盖（<768px）—— 只有字号、行高与节奏变化；颜色与圆角不变
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-h1:      34px;
    --fs-h2:      28px;
    --fs-h3:      20px;
    --fs-h4:      17px;
    --fs-lead:    17px;
    --fs-lead-lg: 17px;
    /* --fs-body 16px / --fs-caption 14px / --fs-micro 13px / --fs-btn 16px 保持不变 */
    --lh-h1:      1.20;
    --lh-h2:      1.25;
    --lh-h3:      1.40;
    --ls-h1:      0;
    --ls-h2:      0;

    --pad-x:            20px;
    --grid-cols:        4;
    --grid-gutter:      16px;
    --sec-y:            64px;
    --sec-y-lg:         64px;
    --card-pad:         16px;
    --sec-y-hero-mobile: 48px;

    --scroll-margin:    72px; /* = --nav-h-mobile(56) + 16 */
    --toast-bottom:     88px; /* 避开底部常驻 CTA 条 */
  }
}

/* ≤375px 窄屏保护：保证 360px 下无横向滚动 */
@media (max-width: 375px) {
  :root {
    --fs-h1:      30px;
    --fs-h2:      25px;
    --pad-x:      16px;
    --btn-px:     20px;
  }
}

/* ==========================================================================
   prefers-reduced-motion 降级（逐条对应 design-spec.md §10.3）
   注意：位移与缩放由 main.css 的 !important 规则关闭；此处只改时长。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  0.01ms;
    --dur-base:  0.01ms;
    --dur-slow:  0.01ms;
    --t-hover:   0.01ms;
    --reveal-lift:      0;
    --reveal-lift-card: 0;
    --reveal-stagger:   0ms;
  }
}