/**
 * 统一设计令牌（Design Tokens）—— 主题「晨曦 Aurora」
 *
 * @description 全站唯一的视觉源头：配色 / 圆角 / 阴影 / 字体 / 尺寸。
 *              改这里就能整体换肤；组件样式只准引用变量，不准写死颜色。
 *
 * 品牌色：青碧（Teal-Cyan）—— 主色 #0F9488，强调渐变 #14B8A6 → #0EA5E9
 * 点缀色：琥珀 #F59E0B —— 用于价格、促销等需要抓眼的位置
 *
 * 同时保留一套旧变量名（--bg-primary / --accent 等）以兼容历史代码。
 */

:root {
  /* 让浏览器原生控件（数字输入框的上下箭头、滚动条、日期选择器、下拉框）
     跟随当前主题配色。不设的话暗色模式下这些控件仍是亮色的，格外刺眼。
     注意这里是「跟随站点主题」而不是 system：主题由 data-theme 手动切换，
     下面深色块里会覆盖成 dark。 */
  color-scheme: light;

  /* ==================== 字体 ==================== */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ==================== 表面（Surface） ==================== */
  --bg:        #F5F7F8;   /* 页面底色 */
  --bg-soft:   #EDF1F2;   /* 交替区块 / 悬浮态 */
  --card:      #FFFFFF;   /* 卡片 */
  --card-soft: #F8FAFA;   /* 卡片内嵌区 */

  /* ==================== 文字 ==================== */
  --text:      #12201E;   /* 主文字 */
  --text-2:    #5B6B68;   /* 次级文字 */
  --text-3:    #95A5A2;   /* 辅助 / 占位 */
  --text-inv:  #FFFFFF;   /* 反色文字（主色底上） */

  /* ==================== 品牌 ==================== */
  --primary:        #0F9488;
  --primary-hover:  #0B7369;
  --primary-soft:   #E4F5F2;
  --primary-ring:   rgba(15, 148, 136, .16);
  --primary-shadow: rgba(15, 148, 136, .28);

  --brand-400: #2DD4BF;
  --brand-500: #14B8A6;
  --brand-600: #0F9488;

  /* ==================== 功能色 ==================== */
  --success: #16A34A;
  --warning: #D97706;
  --danger:  #DC2626;
  --info:    #0EA5E9;
  --accent:  #F59E0B;   /* 点缀：价格 / 促销 */

  --success-soft: rgba(22, 163, 74, .12);
  --warning-soft: rgba(217, 119, 6, .12);
  --danger-soft:  rgba(220, 38, 38, .10);
  --info-soft:    rgba(14, 165, 233, .12);
  /* 语义边框：表单校验 / 提示条 / 状态卡描边 */
  --success-border: rgba(22, 163, 74, .34);
  --danger-border:  rgba(220, 38, 38, .30);
  --warning-border: rgba(217, 119, 6, .34);
  --info-border:    rgba(14, 165, 233, .30);

  /* ==================== 描边 ==================== */
  --border:       #E3E9E8;
  --border-hover: #CBD5D3;

  /* ==================== 圆角 ==================== */
  --radius:      18px;
  --radius-md:   14px;
  --radius-sm:   12px;
  --radius-xs:   8px;
  --radius-pill: 999px;

  /* ==================== 阴影（分层） ==================== */
  --shadow-xs: 0 1px 2px rgba(16, 32, 30, .04);
  --shadow-sm: 0 1px 2px rgba(16, 32, 30, .04), 0 1px 4px rgba(16, 32, 30, .04);
  --shadow:    0 1px 2px rgba(16, 32, 30, .04), 0 6px 18px rgba(16, 32, 30, .06);
  --shadow-hover: 0 10px 30px rgba(16, 32, 30, .12);
  --shadow-lg: 0 20px 52px rgba(16, 32, 30, .14);
  --shadow-brand: 0 8px 22px rgba(15, 148, 136, .26);

  /* ==================== 渐变 ==================== */
  --grad-brand: linear-gradient(135deg, #14B8A6 0%, #0EA5E9 100%);
  --grad-soft:  linear-gradient(160deg, #E4F5F2 0%, #EDF1F2 100%);
  --grad-warm:  linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);

  /* ==================== 第三方品牌色 ==================== */
  /* 支付宝蓝、微信绿等属「品牌识别色」，不应随主题变，但要有名字可引用 */
  --alipay:        #1677FF;
  --alipay-hover:  #0958D9;
  --alipay-ring:   rgba(22, 119, 255, .28);
  --alipay-ring-2: rgba(22, 119, 255, .34);
  --wechat:        #22C55E;

  /* ==================== 语义扩展（组件一律引用这些，禁止写死） ==================== */
  --text-onbrand:  #FFFFFF;                 /* 品牌色 / 实色底上的文字 */
  --fill-white:    #FFFFFF;                 /* 纯白填充（如按钮高光） */
  --bg-sunken:     var(--bg);               /* 内凹区域（金额框、确认框） */
  --scrim:         rgba(16, 32, 30, .42);   /* 遮罩：弹窗 / 抽屉 */
  --scrim-strong:  rgba(16, 32, 30, .66);   /* 遮罩：强调层 */
  /* 随机背景图蒙层：拆成 rgb 三元组 + 独立 alpha，alpha 由后台「背景蒙版浓度」注入
     （templates/partials/head.php 把它写成 --bg-scrim-a）。
     拆开的原因：以前写死 rgba(...,.88) 时底图被盖得几乎看不见，等于没设背景。 */
  --bg-scrim-rgb:  245, 247, 248;           /* 浅色下的提亮蒙层色 */
  --bg-scrim-a:    .55;                     /* 默认浓度，可被后台配置覆盖 */
  --glass:         rgba(255, 255, 255, .06);/* 深色面板上的玻璃层 */
  --hairline:      rgba(16, 32, 30, .08);   /* 极细分隔线 */

  --grad-success-soft: linear-gradient(135deg, rgba(22, 163, 74, .18), rgba(22, 163, 74, .04));
  --grad-warning-soft: linear-gradient(135deg, rgba(217, 119, 6, .18), rgba(217, 119, 6, .04));
  --grad-alipay: linear-gradient(135deg, var(--alipay) 0%, var(--alipay-hover) 100%);

  /* ==================== 尺寸 / 节奏 ==================== */
  --nav-h: 64px;
  --container-max: 1200px;   /* 留白更足，观感更开阔 */
  --section-y: 72px;         /* 区块间距拉开，页面更有呼吸感 */
  --gutter: 24px;            /* 统一左右留白 */

  /* ==================== 动效 ==================== */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .22s;
  --dur-fast: .14s;
  --dur-slow: .34s;

  /* ==================== 层级（z-index） ====================
   * 为什么要有这一层：
   *   以前全站散着 1 / 90 / 95 / 98 / 100 / 200 / 900 / 999 / 1000 / 1200 / 2000 / 3000
   *   十二种值，互相之间没有章法。新组件要盖住老组件，唯一的办法就是「猜一个更大的数」
   *   —— 于是数值一路膨胀到 3000，而「分享弹窗被底部 TabBar 挡住」这类问题照样反复出现。
   *
   *   更麻烦的是层叠上下文：给 body 的直接子元素加 z-index 会让它自成一个层叠上下文，
   *   里面的弹窗再高的 z-index 也只在「这一层」里有效，出不去（见 base.css 的说明）。
   *
   * 用法：**只准引用变量，不准写死数字**。要新增一层，先在这里定名字，
   * 而不是在某个组件里随手写 9999。
   */
  --z-behind:  -1;   /* 装饰层：页面背景图，压在所有内容之下 */
  --z-base:     1;   /* 内容抬高（如 hero 文字盖在背景图上） */
  --z-sticky:  90;   /* 页面内吸底条：商品详情页操作条、后台顶栏 */
  --z-fab:     95;   /* 悬浮操作按钮（FAB） */
  --z-tabbar:  98;   /* 移动端底部 TabBar */
  --z-nav:    100;   /* 顶部导航栏 */
  --z-dropdown: 200; /* 下拉菜单 */
  --z-overlay: 400;  /* 遮罩（弹窗/抽屉背后的暗层） */
  --z-drawer: 450;   /* 抽屉 / 侧栏（在遮罩之上） */
  --z-modal:  500;   /* 弹窗本体 */
  --z-popover: 600;  /* 气泡 / 提示层 */
  --z-toast:  700;   /* 全局吐司提示：永远在最上层 */

  /* ==================== 焦点环 ==================== */
  --focus-ring:        var(--primary);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* ==================== 间距节奏 ====================
   * 统一用这套刻度，不要再随手写 13px / 17px 之类的散值 ——
   * 间距一散，页面看着就「不齐」，而这种不齐很难一眼看出原因。
   */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ==================== 响应式断点（约定值） ====================
   * ⚠️ CSS 的 @media 不支持 var()，所以这里只是**约定**，靠人工遵守。
   *    全站统一用这四个值，不要再引入 780 / 820 / 900 这种散断点 ——
   *    断点一散，同一屏幕宽度下各组件的布局会在不同时刻跳变，观感是「散架」的。
   *
   *   --bp-sm  640px  手机横屏 / 小平板
   *   --bp-md  768px  平板竖屏（主流断点）
   *   --bp-lg 1024px  小桌面 / 平板横屏
   *   --bp-xl 1280px  常规桌面
   */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ==================== 旧变量名（兼容历史代码） ==================== */
  --bg-primary:   var(--bg);
  --bg-secondary: var(--bg-soft);
  --bg-card:      var(--card);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --accent-hover: var(--primary-hover);
  --pay-box-bg:   var(--primary-soft);
  --pay-box-hover: rgba(15, 148, 136, .08);
}

/* ==================== 深色主题 ==================== */
[data-theme="dark"] {
  /* 与 :root 的 color-scheme 成对：切到深色主题时原生控件一并变深 */
  color-scheme: dark;

  --bg:        #0C1114;
  --bg-soft:   #131A1E;
  --card:      #161E23;
  --card-soft: #1B242A;

  --text:      #E6EDF0;
  --text-2:    #9AAAB3;
  --text-3:    #6B7C86;
  --text-inv:  #06231F;

  --primary:        #2DD4BF;
  --primary-hover:  #5EEAD4;
  --primary-soft:   rgba(45, 212, 191, .14);
  --primary-ring:   rgba(45, 212, 191, .22);
  --primary-shadow: rgba(45, 212, 191, .30);

  --brand-400: #5EEAD4;
  --brand-500: #2DD4BF;
  --brand-600: #14B8A6;

  --success: #4ADE80;
  --warning: #FBBF24;
  --danger:  #F87171;
  --info:    #38BDF8;
  --accent:  #FBBF24;

  --success-soft: rgba(74, 222, 128, .14);
  --warning-soft: rgba(251, 191, 36, .14);
  --danger-soft:  rgba(248, 113, 113, .14);
  --info-soft:    rgba(56, 189, 248, .14);

  --success-border: rgba(74, 222, 128, .38);
  --danger-border:  rgba(248, 113, 113, .34);
  --warning-border: rgba(251, 191, 36, .38);
  --info-border:    rgba(56, 189, 248, .34);

  --border:       rgba(255, 255, 255, .10);
  --border-hover: rgba(255, 255, 255, .20);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .34);
  --shadow:    0 2px 6px rgba(0, 0, 0, .34), 0 10px 26px rgba(0, 0, 0, .26);
  --shadow-hover: 0 14px 38px rgba(0, 0, 0, .44);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .52);
  --shadow-brand: 0 8px 24px rgba(45, 212, 191, .26);

  --grad-brand: linear-gradient(135deg, #2DD4BF 0%, #38BDF8 100%);
  --grad-soft:  linear-gradient(160deg, rgba(45, 212, 191, .10) 0%, #131A1E 100%);

  /* 深色下的语义覆盖 */
  --grad-success-soft: linear-gradient(135deg, rgba(74, 222, 128, .20), rgba(74, 222, 128, .05));
  --grad-warning-soft: linear-gradient(135deg, rgba(251, 191, 36, .20), rgba(251, 191, 36, .05));
  --scrim:        rgba(0, 0, 0, .62);
  --scrim-strong: rgba(0, 0, 0, .78);
  --bg-scrim-rgb:  12, 17, 20;             /* 深色下的压暗蒙层色 */
  --bg-scrim-a:    .72;
  --hairline:     rgba(255, 255, 255, .08);
  --glass:        rgba(255, 255, 255, .04);

  /* 暗色下主色/功能色（青、绿、蓝）都变成亮色，白字对比度不足，
     叠在这些亮底上的文字改用深青黑（与 --text-inv 暗色值一致） */
  --text-onbrand: #06231F;
  /* 暖色点缀在暗色下收一点，避免亮橙红在深背景上刺眼；配白字对比度也更好 */
  --grad-warm: linear-gradient(135deg, #B45309 0%, #B91C1C 100%);
}