/* ============================================================================
 * 牙网公众站设计令牌 (tokens.css)
 * ----------------------------------------------------------------------------
 * 本文件是**唯一**的色值与尺度来源。它不产生任何选择器效果，只声明变量。
 *
 * 分三层，顺序不可调换：
 *
 *   1. 尺度令牌（--yw-*）  —— 字号、间距、圆角、阴影、控件高度、容器、动效
 *   2. 语义色令牌（shadcn 命名）
 *        background / foreground / card / popover / primary / secondary /
 *        muted / accent / destructive / border / input / ring
 *        参考 t8y2/dbx 的 tokens.css：组件只认语义名，不再出现字面色值。
 *   3. 派生令牌（color-mix）—— 悬停态、浅色底、浅边框、次级文字，全部由
 *        上面的令牌算出，改一个 --primary 就能牵动整站。
 *
 * 亮色在 `:root`，暗色在 `.dark`，两组必须成对声明同样的变量名。
 *
 * 视觉语言按 dbx 收敛：中性灰阶不带色相、圆角收小（4/4/6/6）、控件高度收紧；
 * 品牌绿保留为 --primary，但压深到 rgb(11 128 95)，白字对比度 4.9:1。
 *
 * 消费方：design-system.css（组件与兼容层）、tailwind.css（@theme 桥接）。
 * ========================================================================== */

:root {
  /* ---------- 1. 尺度令牌 ---------- */

  /* 字体族 */
  --yw-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --yw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 字号阶 */
  --yw-text-2xs: 12px;
  --yw-text-xs: 13px;
  --yw-text-sm: 14px;
  --yw-text-md: 15px;
  --yw-text-lg: 16px;
  --yw-text-xl: 18px;
  --yw-text-2xl: 20px;
  --yw-text-3xl: 24px;
  --yw-text-4xl: 30px;
  --yw-text-5xl: 36px;

  /* 行高 */
  --yw-lh-tight: 1.25;
  --yw-lh-snug: 1.4;
  --yw-lh-normal: 1.6;
  --yw-lh-relaxed: 1.7;

  /* 字重：全站只用四档，杜绝 800/900 滥用 */
  --yw-fw-regular: 400;
  --yw-fw-medium: 500;
  --yw-fw-semibold: 600;
  --yw-fw-bold: 700;

  /* 间距阶（4px 基数） */
  --yw-space-0: 0;
  --yw-space-1: 4px;
  --yw-space-2: 8px;
  --yw-space-3: 12px;
  --yw-space-4: 16px;
  --yw-space-5: 20px;
  --yw-space-6: 24px;
  --yw-space-8: 32px;
  --yw-space-10: 40px;
  --yw-space-12: 48px;
  --yw-space-16: 64px;
  --yw-space-20: 80px;

  /* 圆角：参考 dbx 的档位，整体收小。
     前缀 --yw- 不能省：Tailwind 的主题命名空间就是 --radius-*，
     同名会在 tailwind.css 的 @theme inline 里形成自引用。 */
  --yw-radius: var(--yw-radius-md);
  --yw-radius-xs: 4px;
  --yw-radius-sm: 4px;
  --yw-radius-md: 4px;
  --yw-radius-lg: 6px;
  --yw-radius-xl: 6px;
  --yw-radius-2xl: 8px;
  --yw-radius-3xl: 10px;
  --yw-radius-full: 999px;

  /* 阴影：克制，暗色下由 .dark 覆盖为更重以区分层次 */
  --yw-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.04);
  --yw-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --yw-shadow-md: 0 2px 6px rgb(0 0 0 / 0.08);
  --yw-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.1);
  --yw-shadow-xl: 0 16px 40px rgb(0 0 0 / 0.12);
  --yw-shadow-2xl: 0 24px 56px rgb(0 0 0 / 0.18);

  /* 控件高度：按 dbx 密度收紧；lg 保持 44px 以守住移动端触控目标 */
  --yw-control-sm: 30px;
  --yw-control-md: 36px;
  --yw-control-lg: 44px;

  /* 页头高度。
     两个消费方必须读同一个值：固定页头本身 `body > header.fixed`，
     以及它下面用于补偿固定定位的占位块 `body > .h-14`。此前两者分别是
     64px 与 52px，导致每个页面首屏内容的上边缘都被页头压住 12px
     （首页 hero 直接顶在页头下面）。 */
  --yw-header-height: 64px;

  /* 容器：header / main / footer 共用，消除左右错位 */
  --yw-container: 1200px;
  --yw-gutter: var(--yw-space-4);

  /* 层级 */
  --yw-z-header: 50;
  --yw-z-overlay: 60;
  --yw-z-dialog: 70;
  --yw-z-toast: 80;

  /* 动效 */
  --yw-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --yw-dur-fast: 120ms;
  --yw-dur: 180ms;

  /* ---------- 2. 语义色令牌（亮色） ---------- */

  /* 页面底刻意保留原站那层极淡的薄荷灰(#f7faf9)，而不是纯白：
     卡片是纯白，两者叠在一起才有层次；全白会让卡片"浮"不出来。 */
  --background: rgb(247 250 249);
  --foreground: rgb(10 10 10);

  --card: rgb(255 255 255);
  --card-foreground: rgb(10 10 10);
  --popover: rgb(255 255 255);
  --popover-foreground: rgb(10 10 10);

  /* 主题色只改这三个底层通道，所有组件继续消费语义令牌。 */
  --brand-light: 11 128 95;
  --brand-dark: 52 190 151;
  --brand-ink: 6 40 33;
  --primary: rgb(var(--brand-light));
  --primary-foreground: rgb(255 255 255);

  --secondary: rgb(245 245 245);
  --secondary-foreground: rgb(23 23 23);
  --muted: rgb(245 245 245);
  --muted-foreground: rgb(107 107 107);
  --accent: rgb(245 245 245);
  --accent-foreground: rgb(23 23 23);

  --destructive: rgb(220 38 38);
  --destructive-foreground: rgb(255 255 255);

  --border: rgb(229 229 229);
  --input: rgb(229 229 229);
  --ring: rgb(161 161 161);

  /* 语义状态色 */
  --success: rgb(21 128 61);
  --success-foreground: rgb(255 255 255);
  --warning: rgb(180 83 9);
  --warning-foreground: rgb(255 255 255);
  --info: rgb(37 99 235);
  --info-foreground: rgb(255 255 255);

  /* 价格/促销：国内电商习惯用暖红，与品牌绿和 destructive 都区分开 */
  --price: rgb(205 45 20);
  --price-foreground: rgb(255 255 255);

  /* ---------- daisyUI v5 命名桥接 ----------
     原模板在 <head> 里写死了一条 :root{--color-primary:#10c98f;
     --color-primary-content:#fff}，只为了解决 daisyUI 默认主色是靛蓝。
     那条声明已删除，改由这里接管——好处是暗色下会跟着 --primary 一起翻。

     只需在 :root 声明一次：这些值本身是 var() 引用，而 :root 与 .dark
     落在同一个元素（<html>）上，.dark 里重定义 --primary 后，
     这里引用到的就是暗色值，无需在 .dark 再复制一遍。 */
  --color-primary: var(--primary);
  --color-primary-content: var(--primary-foreground);
  --color-base-100: var(--card);
  --color-base-200: var(--muted);
  --color-base-300: var(--border);
  --color-base-content: var(--foreground);
  --color-neutral: var(--surface-strong);
  --color-neutral-content: var(--surface-strong-foreground);

  /* ---------- 3. 派生令牌（全部由上面算出） ---------- */

  --primary-hover: color-mix(in srgb, var(--primary) 88%, black);
  --primary-active: color-mix(in srgb, var(--primary) 78%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 8%, transparent);
  --primary-border: color-mix(in srgb, var(--primary) 28%, transparent);
  --primary-text: color-mix(in srgb, var(--primary) 92%, black);

  --surface-sunken: var(--muted);
  --border-strong: color-mix(in srgb, var(--foreground) 18%, transparent);
  /* 三级文字（提示、占位、"暂无"）：固定不透明灰，白底 5.1:1、页面底 4.77:1，
     刚好越过 WCAG AA 的 4.5:1——再浅就会在登录页协议行这类小字上失守。
     不用透明度混合——那会让实际对比度随背景变化，无法校验。 */
  --text-tertiary: rgb(110 110 110);

  --success-bg: color-mix(in srgb, var(--success) 12%, transparent);
  --warning-bg: color-mix(in srgb, var(--warning) 14%, transparent);
  --info-bg: color-mix(in srgb, var(--info) 12%, transparent);
  --destructive-bg: color-mix(in srgb, var(--destructive) 12%, transparent);
  --price-soft: color-mix(in srgb, var(--price) 10%, transparent);

  --focus-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);

  /* 遮罩与深色浮层 */
  --overlay: rgb(10 10 10 / 0.45);
  --surface-inverse: rgb(24 24 27);
  --surface-inverse-foreground: rgb(212 212 216);

  /* 品牌深色块（hero / 页脚 / 引导条 / 提示条）：
     这类区块的语义是「始终比页面更深的一档」，而不是「与页面互为反色」。
     因此它们**不跟随主题翻转**——亮色下是浅页面上的深色块，
     暗色下是深页面上的抬升块（比 --background 亮一档以区分层次）。
     用 --surface-inverse 会在这里出错：它在暗色下会变成浅色，导致页脚变成白条。
     --surface-inverse 只保留给真正需要反色的场景（如 toast）。 */
  --surface-strong: rgb(24 24 27);
  --surface-strong-foreground: rgb(250 250 250);
  --surface-strong-muted: rgb(161 161 170);
  --surface-strong-border: rgb(63 63 70);

  color-scheme: light;
}

/* ============================================================================
 * 暗色：与亮色一一对应，只覆盖语义色与阴影，尺度令牌保持不变。
 * 由 .dark 类驱动（配合 tailwind.css 的 @custom-variant dark），
 * 不使用 prefers-color-scheme 直接切换，以便支持用户手动选择。
 * ========================================================================== */

.dark {
  --background: rgb(19 20 22);
  --foreground: rgb(215 215 219);

  --card: rgb(27 27 30);
  --card-foreground: rgb(215 215 219);
  --popover: rgb(30 30 32);
  --popover-foreground: rgb(221 221 226);

  /* 暗底上换用提亮档，块内文字翻成深色，与主题色矩阵联动 */
  --primary: rgb(var(--brand-dark));
  --primary-foreground: rgb(var(--brand-ink));

  --secondary: rgb(42 42 45);
  --secondary-foreground: rgb(215 215 219);
  --muted: rgb(42 42 45);
  --muted-foreground: rgb(151 152 157);
  --accent: rgb(46 47 51);
  --accent-foreground: rgb(221 221 226);

  --destructive: rgb(243 98 95);
  --destructive-foreground: rgb(30 8 8);

  --border: rgb(110 110 114 / 0.28);
  --input: rgb(110 110 114 / 0.34);
  --ring: rgb(133 134 139);

  --success: rgb(74 222 128);
  --success-foreground: rgb(12 30 18);
  --warning: rgb(251 191 36);
  --warning-foreground: rgb(40 32 12);
  --info: rgb(96 165 250);
  --info-foreground: rgb(18 28 46);

  --price: rgb(248 113 113);
  --price-foreground: rgb(40 12 12);

  /* 派生令牌在暗色下方向要反转：悬停变亮、文字色向白靠 */
  --primary-hover: color-mix(in srgb, var(--primary) 88%, white);
  --primary-active: color-mix(in srgb, var(--primary) 78%, white);
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --primary-border: color-mix(in srgb, var(--primary) 34%, transparent);
  --primary-text: color-mix(in srgb, var(--primary) 88%, white);

  --surface-sunken: rgb(23 23 25);
  --border-strong: color-mix(in srgb, var(--foreground) 24%, transparent);
  --text-tertiary: rgb(138 139 144);

  --success-bg: color-mix(in srgb, var(--success) 16%, transparent);
  --warning-bg: color-mix(in srgb, var(--warning) 16%, transparent);
  --info-bg: color-mix(in srgb, var(--info) 16%, transparent);
  --destructive-bg: color-mix(in srgb, var(--destructive) 16%, transparent);
  --price-soft: color-mix(in srgb, var(--price) 14%, transparent);

  --focus-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 36%, transparent);

  --overlay: rgb(0 0 0 / 0.6);
  --surface-inverse: rgb(244 244 245);
  --surface-inverse-foreground: rgb(24 24 27);

  /* 品牌深色块在暗色下改为「抬升」：比 --background rgb(19 20 22) 亮一档 */
  --surface-strong: rgb(39 39 42);
  --surface-strong-foreground: rgb(244 244 245);
  --surface-strong-muted: rgb(161 161 170);
  --surface-strong-border: rgb(63 63 70);

  /* 暗底上阴影要更重才看得出层次 */
  --yw-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.3);
  --yw-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --yw-shadow-md: 0 2px 6px rgb(0 0 0 / 0.45);
  --yw-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
  --yw-shadow-xl: 0 16px 40px rgb(0 0 0 / 0.55);
  --yw-shadow-2xl: 0 24px 56px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

/* 页边距随断点放宽；使用这些断点而非容器查询以兼容旧版 WebView */
@media (min-width: 768px) {
  :root {
    --yw-gutter: var(--yw-space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --yw-gutter: var(--yw-space-8);
  }
}

/* ============================================================================
 * 主题设置矩阵：主题色 × 字号 × 密度 × 对比度 × 动效
 * ----------------------------------------------------------------------------
 * 全部由 <html> 上的 data-* 属性驱动（属性由 assets/theme.js 写入，
 * 首屏由 web_original.rs 的同步脚本提前写好，避免闪白）。
 *
 * 这里只声明"档位"，不出现任何业务选择器：组件依旧只认语义令牌，
 * 因此新增一个主题色只需加一行 [data-accent="x"]，不用碰任何组件样式。
 *
 * 这些块必须放在 :root / .dark **之后**：属性选择器与 :root 特异性相同
 * （都是 0,1,0），同特异性下按文档顺序取胜。
 * ========================================================================== */

/* ---- 主题色：十套品牌色，每套给出亮底档 / 暗底档 / 块内文字色 ----
   取值约束（已逐套算过对比度）：
     · 亮底档  --brand-light 上放白字 ≥ 4.5:1
     · 暗底档  --brand-dark 上放 --brand-ink ≥ 5:1
     · --primary-text 由 --primary 与黑/白混合派生，随档位自动加深/提亮 */
[data-accent="green"] {
  --brand-light: 11 128 95;
  --brand-dark: 52 190 151;
  --brand-ink: 6 40 33;
}
[data-accent="ocean"] {
  --brand-light: 3 105 161;
  --brand-dark: 56 189 248;
  --brand-ink: 8 47 73;
}
[data-accent="indigo"] {
  --brand-light: 67 56 202;
  --brand-dark: 129 140 248;
  --brand-ink: 26 24 66;
}
[data-accent="violet"] {
  --brand-light: 124 58 237;
  --brand-dark: 167 139 250;
  --brand-ink: 41 16 92;
}
[data-accent="rose"] {
  --brand-light: 190 18 60;
  --brand-dark: 251 113 133;
  --brand-ink: 74 6 26;
}
[data-accent="amber"] {
  --brand-light: 161 98 7;
  --brand-dark: 251 191 36;
  --brand-ink: 66 26 3;
}
[data-accent="teal"] {
  --brand-light: 15 118 110;
  --brand-dark: 45 212 191;
  --brand-ink: 4 47 46;
}
[data-accent="sage"] {
  --brand-light: 63 98 82;
  --brand-dark: 134 188 160;
  --brand-ink: 18 43 33;
}
[data-accent="slate"] {
  --brand-light: 71 85 105;
  --brand-dark: 148 163 184;
  --brand-ink: 24 31 42;
}
[data-accent="coral"] {
  --brand-light: 194 65 12;
  --brand-dark: 251 146 60;
  --brand-ink: 67 20 7;
}

/* ---- 圆角：默认 soft 沿用基础令牌；其余两档只覆盖尺度。 ---- */
[data-radius="square"] {
  --yw-radius: 0;
  --yw-radius-xs: 0;
  --yw-radius-sm: 0;
  --yw-radius-md: 0;
  --yw-radius-lg: 0;
  --yw-radius-xl: 0;
  --yw-radius-2xl: 0;
  --yw-radius-3xl: 0;
}
[data-radius="round"] {
  --yw-radius: 10px;
  --yw-radius-xs: 6px;
  --yw-radius-sm: 8px;
  --yw-radius-md: 10px;
  --yw-radius-lg: 14px;
  --yw-radius-xl: 18px;
  --yw-radius-2xl: 22px;
  --yw-radius-3xl: 28px;
}

/* ---- 字号：改根字号。Tailwind 的工具类是 rem，会整体跟着放大；
   --yw-* 字号阶是 px，这里同步按比例覆盖一遍。 ---- */
[data-scale="lg"] {
  font-size: 112.5%;
  --yw-text-2xs: 13px;
  --yw-text-xs: 15px;
  --yw-text-sm: 16px;
  --yw-text-md: 17px;
  --yw-text-lg: 18px;
  --yw-text-xl: 20px;
  --yw-text-2xl: 23px;
  --yw-text-3xl: 27px;
  --yw-text-4xl: 34px;
  --yw-text-5xl: 41px;
}
[data-scale="xl"] {
  font-size: 125%;
  --yw-text-2xs: 15px;
  --yw-text-xs: 16px;
  --yw-text-sm: 18px;
  --yw-text-md: 19px;
  --yw-text-lg: 20px;
  --yw-text-xl: 23px;
  --yw-text-2xl: 25px;
  --yw-text-3xl: 30px;
  --yw-text-4xl: 38px;
  --yw-text-5xl: 45px;
}

/* ---- 密度：只动间距阶与控件高度，字号与色值不动 ---- */
[data-density="compact"] {
  --yw-space-1: 3px;
  --yw-space-2: 6px;
  --yw-space-3: 9px;
  --yw-space-4: 12px;
  --yw-space-5: 15px;
  --yw-space-6: 18px;
  --yw-space-8: 24px;
  --yw-space-10: 30px;
  --yw-space-12: 36px;
  --yw-space-16: 48px;
  --yw-space-20: 60px;
  --yw-control-sm: 26px;
  --yw-control-md: 32px;
  --yw-control-lg: 38px;
}
[data-density="relaxed"] {
  --yw-space-2: 10px;
  --yw-space-3: 15px;
  --yw-space-4: 20px;
  --yw-space-5: 25px;
  --yw-space-6: 30px;
  --yw-space-8: 40px;
  --yw-space-10: 50px;
  --yw-space-12: 60px;
  --yw-space-16: 80px;
  --yw-space-20: 100px;
  --yw-control-sm: 34px;
  --yw-control-md: 40px;
  --yw-control-lg: 48px;
}

/* ---- 高对比：拉开文字/边框与底色的距离，给弱视与强光环境用 ---- */
[data-contrast="high"] {
  --background: rgb(255 255 255);
  --foreground: rgb(0 0 0);
  --card: rgb(255 255 255);
  --muted-foreground: rgb(74 74 74);
  --text-tertiary: rgb(74 74 74);
  --border: rgb(140 140 140);
  --input: rgb(115 115 115);
  --ring: rgb(0 0 0);
  --border-strong: rgb(74 74 74 / 0.6);
}
.dark[data-contrast="high"] {
  --background: rgb(0 0 0);
  --foreground: rgb(255 255 255);
  --card: rgb(20 20 22);
  --muted-foreground: rgb(203 204 209);
  --text-tertiary: rgb(203 204 209);
  --border: rgb(155 155 161 / 0.62);
  --input: rgb(170 170 176 / 0.72);
  --ring: rgb(255 255 255);
  --border-strong: rgb(210 210 216 / 0.5);
}

/* ---- 减弱动效：与系统 prefers-reduced-motion 等效，但由用户显式选择 ---- */
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  transition-duration: 1ms !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}