/* 百姓厨房 · 大学城食堂贴纸菜单 — Design Tokens
   Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V5
   铁律：组件内禁止硬编码任何色值/字体，一律引用本文件 token。 */
:root {
  /* ── 纸面（暖米色系，均带暖色相，避免死灰） ── */
  /* 2026-09-30 己（第五轮 §P1「背景分层拉开」）：页面 / 卡片 / Header · Modal 三层不再同色。
       页面 #FBF7EF · 卡片 #FFFFFF · Header 与 Modal（含 Bottom Sheet）#FFFCF7。
       值仍以 oklch 书写（等值换算），组件照旧只引 token、不写死色值。 */
  --paper: oklch(97.7% 0.0114 84.6);      /* #FBF7EF 页面底 */
  --paper-2: oklch(93.5% 0.03 80);
  --surface: oklch(100% 0 0);             /* #FFFFFF 卡片底（商品卡 / 面板 / 表单） */
  --surface-warm: oklch(99.2% 0.0073 80.7); /* #FFFCF7 Header 与 Modal 底 */
  --surface-2: oklch(96% 0.02 84);

  /* ── 墨色 ── */
  --ink: oklch(28% 0.026 55);
  --ink-soft: oklch(42% 0.028 58);
  --muted: oklch(50% 0.034 62);
  /* 2026-09-30 己（第五轮 §P0-12③ / §P0-9）：比 --muted 再浅一级的说明文字。
     陛下点名的 #888 换算成 oklch 是 L 61.7% / C 0，这里按全站暖灰色系取 C 0.022 / H 70，
     视觉与 #888 同级（略偏暖），组件照旧只引 token 不写死 hex。 */
  --muted-2: oklch(61.7% 0.022 70);
  /* 2026-09-30 辛（第六轮 §P0-7「Cart 辅助说明再弱化」）：陛下点名 #999。
     换算同 --muted-2 的口径（#888 → L 61.7%）：#999 → L 66.9%，色相/彩度沿用暖灰 C 0.022 / H 70，
     免得比 --muted-2 更浅却更冷。目前只服务 Cart 里那一行运费说明。 */
  --muted-3: oklch(66.9% 0.022 70);

  /* ── 辣椒红（主强调） ── */
  --tomato: oklch(62.6% 0.2083 31.3);     /* #EB432B 降饱和主色（第五轮 §P1，弃用更艳的 #FF5A36） */
  --tomato-deep: oklch(50% 0.17 30);
  --tomato-soft: oklch(94% 0.045 34);
  --tomato-ink: oklch(99% 0.006 85);

  /* ── 芥末黄（高亮/胶带/价签） ── */
  --mustard: oklch(84% 0.155 88);
  --mustard-deep: oklch(58% 0.13 70);
  --mustard-soft: oklch(94% 0.07 84);

  /* ── 薄荷绿（成功） ── */
  --herb: oklch(58% 0.135 158);
  --herb-deep: oklch(45% 0.12 158);
  --herb-soft: oklch(94% 0.055 158);

  /* ── 天空蓝（提示条） ── */
  --sky: oklch(70% 0.11 222);
  --sky-soft: oklch(95% 0.035 222);

  /* ── 边框 ── */
  --line: oklch(88% 0.04 78);
  --line-strong: oklch(77% 0.055 74);
  --line-card: rgb(0 0 0 / 0.06);         /* 第五轮 §P1：商品卡描边更轻（不再用暖色 --line） */

  /* ── 语义色 ── */
  --success: var(--herb);
  --error: var(--tomato);
  --warning: var(--mustard-deep);
  --focus: var(--tomato);

  /* ── 页脚专属（深色底上） ── */
  --footer-text: oklch(80% 0.03 70);
  --footer-muted: oklch(64% 0.03 70);
  --footer-line: oklch(64% 0.03 70 / 0.28);

  /* ── 字体：展示 + 正文 + 数字（2+1 上限） ──
     语言策略：英文为主 · 中文为辅
     英文展示 = Baloo 2（圆润活泼，贴合大学城贴纸气质）
     中文展示 = ZCOOL KuaiLe（贴纸感中文标题）
     正文 = Noto Sans SC（中英混排通用） */
  --font-display: "Baloo 2", "ZCOOL KuaiLe", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num: "Baloo 2", "Noto Sans SC", sans-serif;

  /* ── 间距（4pt 体系） ── */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ── 圆角 ── */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* ── 字号（fluid） ── */
  --text-xs: clamp(11px, 1.1vw, 12px);
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: clamp(16px, 1.6vw, 18px);
  --text-lg: clamp(20px, 2.2vw, 26px);
  --text-xl: clamp(26px, 3.4vw, 40px);
  --text-display: clamp(34px, 5vw, 54px);

  /* ── 阴影（统一暖墨色） ── */
  --shadow-sm: 0 1px 2px oklch(28% 0.03 55 / 0.08), 0 3px 10px oklch(28% 0.03 55 / 0.06);
  --shadow-md: 0 4px 14px oklch(28% 0.03 55 / 0.12);
  --shadow-lg: 0 18px 44px oklch(28% 0.03 55 / 0.18);

  /* ── 动效 ── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* ── 层级与顶栏高度 ── */
  --z-sticky: 200;
  --z-nav: 300;
  --z-cart: 500;
  --z-overlay: 600;
  --z-toast: 700;
  --banner-height-full: 64px;
  --banner-height-compact: 56px;
  /* 2026-09-30 甲：滚动后顶栏收窄 —— JS 只把 --banner-height 在这两个值之间切换，
     分类吸顶条 / 购物车面板的 top 同步跟随，不需各自改 */
  --banner-height: var(--banner-height-full);

  /* ── 2026-09-30 丙（陛下反馈 §1「Hero 缩短，食物放大」）──
     原 Hero 是一整张带遮罩的大图，文字压在上面 → 文字一多图就小。现在拆成两块：
     上面纯文字（自适应高），下面 = 整宽 4 图拼图，高度由这三个 token 定。
     手机 344px 是量出来的：390×844 首屏扣掉顶栏/文字块/模式选择器/跑马灯/分类条后，
     拼图落在这个高度时食物约占第一屏 41%（陛下要 40–50%）。 */
  /* 2026-09-30 己（第五轮 §P0-1）：Hero 高度整体压到陛下给的口径内 ——
     手机 180–220px（取 200）· 桌面 280–320px（取下沿 280），目标是首屏底部就能看到分类条与 Our Menu。
     上一轮 344/300/320 时 Hero 独占手机首屏 40–50%，必须先滚一次才见菜单。
     桌面为什么取 280 而不是区间中值：1280×800 实测，310px 时第一排菜落在 843px（屏底外 43px），
     压到 280px 后第一排菜进屏 —— 陛下给这个区间的用意就是「首屏见菜单」，取下沿才达标。 */
  /* 2026-09-30 辛（第六轮 §P0-1「Hero 再矮 15–20%」+ §P0-2「框比例调成 3:1」）：
     桌面食物图 280 → 260px（陛下给定值）。⚠️ 只有「把图框收窄居中」才能同时满足两条：
       · 若维持满宽，1366 宽的 3:1 框 = 455px 高 —— 比现在还高，与「再矮」直接冲突；
       · 收窄到 780px（780÷260 = 3.0）后，Hero 整块反而变矮，且图从「放大 1.37× 再裁」
         变成「1600px 原图缩到 780px」—— 陛下说的「米粒发糊」正是前者造成的。
     平板同一算法：240 × 3 = 720。手机不受影响：那档的图高由 --hero-h-mobile 反推，
     实测约 106px / 358 宽 ≈ 3.3:1，本来就在 3:1 附近，保持满宽。 */
  --hero-food-h-mobile: 200px;
  --hero-food-h-tablet: 240px;
  --hero-food-h-desktop: 260px;
  /* ── 2026-09-30 庚（第六轮 · 手机补充 §1「Hero 手机 height 220px（最多 240）」）──
     陛下这个数指的是 Hero **整块**，不是单指下面那张食物图。上一版量到整块 332px
     （文字块 128.3 + 食物图 200 + 4px 芥末胶带线），陛下原话「Hero 再砍 30%」，
     332 × 0.7 = 232，正落在 220（最多 240）这一档，故取 220。
     实现：.hero 定这个高，.hero-photo 改 flex:1 吃掉文字块与胶带线剩下的全部
     （390×844 实测约 106px）—— 图不再自己定高，高度由「整块预算」反推，
     以后调标题字号也只会让图变矮，不会再把分类条顶出首屏。
     上面那三个 --hero-food-h-* 仍然管平板/桌面，不动。 */
  --hero-h-mobile: 220px;
  --radius-btn: 14px;       /* 规范 §31：Button 14px */
  --radius-seg: 14px;       /* 规范 §8：Segmented Control 14px */
  --h-cta: 52px;            /* 规范 §32：Primary 高 52px */
  --h-seg: 48px;            /* 规范 §8：Segmented Control 高 48px */
  --h-tap: 44px;            /* 规范 §40：可点面积 ≥44×44 */
  /* 2026-09-30 己（第五轮 §P0-4/P0-5）：分类胶囊 42px；
     --h-cat-nav = 胶囊 42 + 上下内边距 8×2 + 底边框 1 = 59px。
     ⚠️ 必须写成字面量：JS 的 readPx() 用 parseFloat 读计算值，calc() 不会被求值。 */
  --h-cat: 42px;
  --h-cat-nav: 59px;
  /* ── 2026-09-30 庚（第六轮 · 手机补充 §7/§8）──
     贴底条与 Toast 的尺子。手机补充文件只管手机，但这两个组件在手机上才有意义
     （桌面是右侧常驻 Cart 面板，贴底条 display:none），所以直接写死在这里。 */
  --bg-bagbar: 16px;        /* §7 贴底条左右留白（陛下要 16） */
  /* 2026-09-30 壬（第六轮 · 手机补充 §6「View Bag 再瘦 6–8px」）：66 → 59px。
     圆角仍 24px（§6 同条已在上轮落地），只收高度 —— 66px 的条在 844px 屏上压掉
     首屏一整行商品卡的下缘；59 落在陛下给的「再减 6–8」区间中点。
     注意 --h-toast 定位用 calc(--bg-bagbar + --h-bagbar + 10px)，这里一改 Toast 自动跟随。 */
  --h-bagbar: 59px;         /* §6 贴底条高（66 − 7） */
  --r-bagbar: 24px;         /* §7 贴底条圆角（陛下要 ~24，原 999 全圆） */
  --h-toast: 48px;          /* §8 Toast 高（陛下要 ~48），配 flex 居中 → 高恒等于此值 */

  /* ── 2026-09-30 乙：菜品卡 / 菜品详情 / 细跑马灯 ── */
  --radius-card: 16px;      /* 规范 §31：Product Card 16px */
  --radius-modal: 20px;     /* 规范 §31：Modal 20px */
  --radius-sheet: 24px;     /* 规范 §31：Bottom Sheet 顶部 24px */
  --radius-input: 12px;     /* 规范 §31：Input 12px */
  --radius-img: 12px;       /* 卡片内菜品图圆角 */
  --shadow-card: 0 3px 12px rgb(0 0 0 / 0.05);  /* 第五轮 §P1：卡片阴影更轻更散 */
  --h-add: 40px;            /* 规范 §11：右下圆形 + 按钮 40×40 */
  --h-step: 30px;           /* 卡片内 − 1 + 步进器控件尺寸 */
  --h-sheet: 78vh;          /* 规范 §12：Bottom Sheet 60–90vh */
  --h-sheet-max: 90vh;
  --w-modal-detail: 560px;  /* 规范 §12：Desktop 居中 Modal 500–600px */
  --dur-sheet: 300ms;       /* 规范 §30：Bottom Sheet 300ms ease-out */
}

/* ═══════════ 手机专属覆盖（2026-09-30 庚 · 第六轮）═══════════
   手机补充文件是「手机端数值补充」，它给的每个数都自带「手机」二字（§1 标题就是
   「Hero 再砍 30%（手机）」），所以这一节的每个数都关在媒体查询里，不外溢：
   桌面仍走 §P0-4 的 胶囊 42 / 内边距 18 / 字号 14 与条高 59。
   ⚠️ 值必须写成字面量 px —— app.js 的 readPx() 用 parseFloat 读计算值，calc() 读不出来。
   放在 tokens.css 而不是 style.css：组件只引 token 不写死数值，这条铁律不能因为
   一次响应式调整就破例。加载顺序上 tokens.css 在前，但同文件内媒体查询在后，覆盖成立。 */
@media (max-width: 640px) {
  :root {
    /* §3「分类按钮缩 15%」：高 44 · 左右内边距 16 · 字号 15。
       字号陛下给的是 15–16，取下沿 15：胶囊是横滑的，宽度每省 1px 就多露一截下一个分类。
       2026-09-30 壬（第六轮 · 手机补充 §2「Category Bar →54–56px」）：上一版条高 57
       （胶囊 44 + 内边距 6×2 + 底边框 1）落在区间外 1px。胶囊 44 不能再让 —— §40 的
       可点面积 ≥44×44 是硬线，再矮就是「看得见按不准」；所以把上下内边距 6 → 5，
       条高 = 44 + 5×2 + 1 = 55px，正落陛下要的 54–56 区间。 */
    --h-cat: 44px;
    --h-cat-nav: 55px;
  }
}
@media (max-width: 1023px) {
  /* §4「Header 滚动后进 compact mode：整体 52–56px」：原 56 已在区间上沿，取中值 54。
     留 2px 给分类条，滚动后吸顶栈 = 54 + 57 = 111px，比原来的 56 + 59 = 115 多让出 4px。
     ⚠️ 只覆盖手机/平板；桌面 §6 规范的 64 / 56 不动。 */
  :root { --banner-height-compact: 54px; }
}