/* ============================================================
   易电行 · 充电设备供求信息与行业企业名录平台
   tokens.css — 设计令牌（唯一真源）
   所有色值对比度均为脚本实测（WCAG 2.1 相对亮度公式），非目测。
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- 品牌色：取自立站 logo 像素采样 ----------
     logo 主色 = #00C585（亮春绿）
     梯度用途严格区分，避免 AA 翻车： */
  --brand:        #00C585;  /* 白底 2.25:1 → 仅图形/装饰/色块，禁止用于文字 */
  --brand-400:    #00A873;  /* 白底 3.07:1 → 仅 ≥24px 大字、图标描边 */
  --brand-600:    #007E57;  /* 白底 5.09:1 → 正文链接、小字可用 ✓ AA */
  --brand-700:    #056D4C;  /* 白底 6.37:1 → 悬停态、深链接 ✓ AA */
  --brand-800:    #04603F;  /* 白底 7.64:1 → 深底上的强调 ✓ AAA */
  --brand-wash:   rgba(0, 197, 133, .10);  /* 浅底块 */
  --brand-wash-2: rgba(0, 197, 133, .18);  /* 选中态 */
  --brand-line:   rgba(0, 197, 133, .34);

  /* 实心主按钮：亮品牌绿底 + 深墨字 = 8.18:1 ✓ 醒目且达标 */
  --btn-bg:       #00C585;
  --btn-fg:       #0B1424;

  /* ---------- 强调色：求购 / 时效 / 提醒 ---------- */
  --accent:       #FFA22B;  /* 白底 2.01:1 → 仅图形 */
  --accent-400:   #D97500;  /* 白底 3.23:1 → 仅大字 */
  --accent-700:   #B45309;  /* 白底 5.02:1 → 小字/标签文字 ✓ AA */
  --accent-800:   #8A4A00;  /* 白底 6.86:1 → 深链接 ✓ AA */
  --accent-wash:  rgba(255, 162, 43, .14);

  /* ---------- 墨色梯度（正文骨架） ---------- */
  --ink:    #0B1424;  /* 白底 18.42:1 ✓ AAA — 标题 */
  --ink-2:  #3D4A61;  /* 白底  8.93:1 ✓ AAA — 正文 */
  --ink-3:  #5A6779;  /* 白底  5.75:1 ✓ AA  — 次要文字 */
  /* 4.60 在白底刚好达标，但压到 --bg-soft / --bg-warm 上会掉到 4.32 / 4.44。
     取 #657080 保证三种底色都过 AA：白 5.02 / 浅底 4.71 / 暖白 4.84 */
  --ink-4:  #657080;  /* 白底 5.02:1 ✓ AA — 可读下限（元信息、短标签） */
  --mute:   #8A93A3;  /* 白底  3.10:1 ✗    — 仅装饰线/分隔符，禁止承载信息 */

  /* ---------- 底色与描边 ---------- */
  --bg:        #FFFFFF;
  --bg-soft:   #F5F8FA;   /* 浅灰蓝底，比纯灰更贴品牌 */
  --bg-warm:   #FAFBF9;   /* 极浅暖白，用于交替段 */
  --line:      #E4E8EF;   /* 常规分隔线 */
  --line-soft: #EFF2F7;   /* 极细分隔线 */
  --line-hard: #CFD6E0;   /* 强分隔 / 表格外框 */

  /* ---------- 夜底（深色通栏） ---------- */
  --night:        #0B1424;  /* 底色 */
  --night-2:      #16223A;  /* 夜底上的卡片 */
  --night-line:   rgba(255, 255, 255, .12);
  /* 夜底上的文字实测：白 18.42:1 / #5FE3B4 11.52:1 / #A8C0D8 9.82:1 / #8FA3BE 7.15:1 —— 全部 ✓ */
  --night-fg:     #FFFFFF;
  --night-fg-2:   #A8C0D8;  /* 9.82:1 ✓ */
  --night-fg-3:   #8FA3BE;  /* 7.15:1 ✓ */
  --night-brand:  #5FE3B4;  /* 11.52:1 ✓ 夜底上的品牌绿 */
  --night-accent: #FFA22B;  /*  9.17:1 ✓ */

  /* ---------- 字体 ---------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono",
               Consolas, "Liberation Mono", monospace;

  /* ---------- 字号 ---------- */
  --fs-11: .6875rem;  /* 11px 微标签 */
  --fs-12: .75rem;    /* 12px 辅助 */
  --fs-13: .8125rem;  /* 13px 表格/元信息 */
  --fs-14: .875rem;   /* 14px 正文小 */
  --fs-16: 1rem;      /* 16px 正文 */
  --fs-18: 1.125rem;  /* 18px 小标题 */
  --fs-22: 1.375rem;  /* 22px 区块标题 */
  --fs-28: 1.75rem;   /* 28px 大标题 */
  --fs-38: 2.375rem;  /* 38px 首屏标题 */
  --fs-56: 3.5rem;    /* 56px 超大字（数字/首屏） */

  /* ---------- 间距（4 基线） ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-8: 32px;  --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px;

  /* ---------- 圆角（现代商务：克制，不用大圆角） ---------- */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-pill: 999px;

  /* ---------- 阴影（极克制，靠描边分层） ---------- */
  --sh-1: 0 1px 2px rgba(11, 20, 36, .04);
  --sh-2: 0 2px 10px rgba(11, 20, 36, .06);
  --sh-3: 0 10px 32px rgba(11, 20, 36, .10);

  /* ---------- 动效 ---------- */
  --e-out: cubic-bezier(.22, .68, .36, 1);
  --e-in-out: cubic-bezier(.5, .05, .35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* ---------- 布局 ---------- */
  --w-page: 1240px;
  --w-page-wide: 1440px;
  --h-nav: 64px;
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1e-06s;
    --t-base: 1e-06s;
    --t-slow: 1e-06s;
  }
}