/* ==========================================================================
   theme.css — 设计令牌（Design Tokens）
   全站所有颜色 / 间距 / 圆角 / 字号 / 阴影 都只在这里定义。
   后期调整风格：改本文件的变量值，或在 <html> 上换 data-theme / data-density。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 品牌色：换主色只改这 4 行 ---------- */
  --brand:          #ff555b;
  --brand-dark:     #e0434a;
  --brand-soft:     #ffcecf;
  --brand-tint:     #fff3f3;
  --brand-contrast: #ffffff;

  /* ---------- 中性色 ---------- */
  --text-1:      #1f2329;
  --text-2:      #4d4d4d;
  --text-3:      #8a8a8a;
  --text-4:      #b8b8b8;
  --bg-page:     #f5f5f5;
  --bg-card:     #ffffff;
  --bg-muted:    #f2f2f2;
  --bg-sunken:   #fafafa;
  --border:        #ebebeb;
  --border-strong: #dcdcdc;

  /* ---------- 语义色 ---------- */
  --price:   var(--brand);
  --success: #0f6e56;
  --warning: #b26a00;
  --danger:  #d9363e;

  /* ---------- 圆角 ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 36px;

  /* ---------- 字号 / 行高 ---------- */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-md:   13px;
  --fs-base: 14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  26px;
  --lh-tight: 1.25;
  --lh-base:  1.6;

  /* ---------- 布局 ---------- */
  --page-max: 640px;
  --header-h: 48px;
  --tabbar-h: 54px;
  --safe-b:   env(safe-area-inset-bottom, 0px);

  /* ---------- 阴影 ---------- */
  --shadow-card:  0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .05);
  --shadow-float: 0 6px 18px rgba(0, 0, 0, .14);

  /* ---------- 动效 ---------- */
  --dur:  .22s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   主题预设：<html data-theme="dark"> 即可整体换肤
   也可运行时切换：App.setTheme('green')
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;
  --text-1: #e9e9e9;
  --text-2: #c4c4c4;
  --text-3: #9b9b9b;
  --text-4: #747474;
  --bg-page:   #141414;
  --bg-card:   #1f1f1f;
  --bg-muted:  #2a2a2a;
  --bg-sunken: #191919;
  --border:        #313131;
  --border-strong: #3d3d3d;
  --brand-tint: #3a2223;
  --brand-soft: #5c2f31;
  --shadow-card:  0 1px 2px rgba(0, 0, 0, .5);
  --shadow-float: 0 6px 18px rgba(0, 0, 0, .6);
}

[data-theme="green"] {
  --brand:      #0f6e56;
  --brand-dark: #0b5741;
  --brand-soft: #b9e3d5;
  --brand-tint: #eef8f4;
}

[data-theme="blue"] {
  --brand:      #1a6fd4;
  --brand-dark: #155cb0;
  --brand-soft: #c3ddf7;
  --brand-tint: #eef5fd;
}

[data-theme="ink"] {
  --brand:      #2c2c2a;
  --brand-dark: #111110;
  --brand-soft: #d9d9d5;
  --brand-tint: #f4f4f2;
}

/* 信息密度：<html data-density="compact"> 全局收紧一档（列表页可放更多商品） */
[data-density="compact"] {
  --sp-2: 6px;
  --sp-3: 9px;
  --sp-4: 12px;
  --sp-5: 15px;
  --sp-6: 21px;
  --fs-md: 12px;
  --fs-base: 13px;
  --fs-lg: 15px;
}

/* ==========================================================================
   响应式尺度：同一套代码同时适配手机 / 平板 / PC
   手机（默认）→ 单列、底部导航；平板 → 容器放宽、商品 3 列；
   PC → 顶部横向导航、商品 4~5 列、详情页左右分栏。
   想整体调 PC 观感（容器宽度 / 顶栏高度），只改这一段。
   ========================================================================== */

/* 平板 / 小笔记本 */
@media (min-width: 700px) {
  :root { --page-max: 860px; }
}

/* PC：顶栏接手导航，底部导航让位（--tabbar-h 归零，即不再预留底部空间） */
@media (min-width: 900px) {
  :root {
    --page-max: 960px;
    --header-h: 56px;
    --tabbar-h: 0px;
    --safe-b: 0px;
  }
}

/* 宽屏 PC：容器与字号再放大一档 */
@media (min-width: 1200px) {
  :root {
    --page-max: 1200px;
    --header-h: 60px;
    --fs-base: 15px;
    --fs-md: 14px;
    --fs-lg: 17px;
  }
}

/* ==========================================================================
   hidden 属性兜底（双端共用）
   只要元素在作者样式里声明了 display，就会覆盖浏览器默认的
   [hidden] { display: none }，「隐藏」随即失效。已发现的实际影响：
     · .login   → 登录成功后登录页不消失，看着像「点登录没反应」
     · .admin   → 未登录时后台骨架就露在登录页下方，看着像「下拉」
     · .backtop → 返回顶部按钮在页面顶部也一直挂着
   此处统一兜底，避免以后新增带 display 的组件再踩同一个坑。
   ========================================================================== */
[hidden] { display: none !important; }