/* =============================================================================
 * 天天美味铺 · Web 版设计系统 —— Design Tokens
 * -----------------------------------------------------------------------------
 * 这是整站的「唯一色彩/尺寸/动效真相源」。
 * 业务样式（base / components / home / 后续页面）一律通过 var(--xxx) 取值，
 * 严禁在其它文件中硬编码颜色、圆角、阴影和间距，以保证全站视觉一致且可换肤。
 * ========================================================================== */

:root {
  /* =========================================================================
   * 1. 品牌色板 Brand Palette
   * ====================================================================== */
  --c-brand: #FF5A36;         /* 食欲橙 —— 主品牌色 */
  --c-brand-deep: #E8431F;    /* 主色深阶：hover / 按下 */
  --c-brand-lift: #FF7A52;    /* 主色亮阶：渐变起点 */
  --c-brand-light: #FFA184;   /* 主色浅阶：深色底上的高亮文字 */
  --c-brand-red: #FF3D2E;     /* 暖红 —— 强调色（价格、角标、关键 CTA） */
  --c-ink: #263238;           /* 炭黑 —— 正文与深色背景 */
  --c-ink-deep: #1B2429;      /* 炭黑更深阶：Hero 背景顶部 */
  --c-ink-soft: #2F3E45;      /* 炭黑浅阶：Hero 背景底部 */
  --c-cream: #FFF5EB;         /* 米白 —— 页面底色 */
  --c-cream-deep: #F7E9DA;    /* 米白深阶：分区交替底色 */

  /* 品牌渐变 */
  --grad-brand: linear-gradient(135deg, #FF7A52 0%, #FF5A36 48%, #FF3D2E 100%);
  --grad-brand-h: linear-gradient(90deg, #FF7A52 0%, #FF3D2E 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(255, 90, 54, .14), rgba(255, 61, 46, .05));
  --grad-cream: linear-gradient(180deg, #FFF9F2 0%, #FFF5EB 45%, #FBEBDD 100%);
  --grad-ink: linear-gradient(170deg, #172025 0%, #263238 52%, #33454D 100%);
  --grad-ink-2: linear-gradient(150deg, #223038 0%, #2E4048 58%, #3C525C 100%); /* 深色区块的次级底 */

  /* 功能色 */
  --c-success: #1FA97A;
  --c-warning: #F5A524;
  --c-danger: #E8431F;
  --c-info: #3E8BFF;

  /* =========================================================================
   * 2. 中性色阶 Neutral Scale（统一用 rgba 便于叠加到任意底色上）
   * ====================================================================== */
  --c-ink-92: rgba(38, 50, 56, .92);
  --c-ink-80: rgba(38, 50, 56, .80);
  --c-ink-68: rgba(38, 50, 56, .68);
  --c-ink-55: rgba(38, 50, 56, .55);
  --c-ink-40: rgba(38, 50, 56, .40);
  --c-ink-24: rgba(38, 50, 56, .24);
  --c-ink-12: rgba(38, 50, 56, .12);
  --c-ink-07: rgba(38, 50, 56, .07);
  --c-ink-04: rgba(38, 50, 56, .04);

  --c-white: #FFFFFF;
  --c-white-88: rgba(255, 255, 255, .88);
  --c-white-64: rgba(255, 255, 255, .64);
  --c-white-34: rgba(255, 255, 255, .34);
  --c-white-18: rgba(255, 255, 255, .18);
  --c-white-10: rgba(255, 255, 255, .10);
  --c-white-06: rgba(255, 255, 255, .06);

  --c-line: rgba(38, 50, 56, .10);        /* 浅底描边 */
  --c-line-strong: rgba(38, 50, 56, .18);
  --c-line-invert: rgba(255, 255, 255, .16); /* 深底描边 */

  /* =========================================================================
   * 3. 玻璃拟态 Glassmorphism
   * ====================================================================== */
  --glass-bg: rgba(255, 253, 250, .66);      /* 浅底玻璃 */
  --glass-bg-strong: rgba(255, 253, 250, .86);
  --glass-bg-dark: rgba(255, 255, 255, .09); /* 深底玻璃 */
  --glass-border: rgba(255, 255, 255, .58);
  --glass-border-dark: rgba(255, 255, 255, .16);
  --glass-blur: 18px;
  --glass-blur-lg: 32px;
  --glass-saturate: 160%;

  /* =========================================================================
   * 4. 字体 Typography
   * ====================================================================== */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans SC", sans-serif;
  --font-display: "SF Pro Display", "PingFang SC", "HarmonyOS Sans SC",
                  system-ui, -apple-system, "Segoe UI", "Microsoft YaHei",
                  sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Consolas, "Liberation Mono",
               Menlo, monospace;

  /* 字号阶梯（clamp 实现流体响应） */
  --fs-display: clamp(2.75rem, 7.2vw, 6.25rem);
  --fs-hero: clamp(2.35rem, 6vw, 5rem);      /* 首页 Hero 主标题 */
  --fs-h1: clamp(2rem, 4.6vw, 3.5rem);
  --fs-h2: clamp(1.65rem, 3.2vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-h4: clamp(1.05rem, 1.5vw, 1.15rem);
  --fs-lead: clamp(1rem, 1.5vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .78rem;
  --fs-2xs: .7rem;

  --lh-tight: 1.06;
  --lh-snug: 1.26;
  --lh-normal: 1.6;
  --lh-loose: 1.85;

  --ls-mega: -.035em;   /* 超大标题收紧字距 */
  --ls-tight: -.02em;
  --ls-normal: 0;
  --ls-wide: .06em;
  --ls-wider: .16em;    /* 小标签全大写宽字距 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* =========================================================================
   * 5. 间距 Spacing（4px 基准栅格）
   * ====================================================================== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  /* 分区纵向留白（流体） */
  --section-y: clamp(72px, 11vw, 160px);
  --section-y-sm: clamp(48px, 7vw, 96px);

  /* =========================================================================
   * 6. 圆角 Radius
   * ====================================================================== */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-2xl: 48px;
  --r-full: 999px;

  /* =========================================================================
   * 7. 阴影 Elevation
   * ====================================================================== */
  --sh-1: 0 1px 2px rgba(38, 50, 56, .05), 0 6px 16px rgba(38, 50, 56, .06);
  --sh-2: 0 2px 6px rgba(38, 50, 56, .06), 0 16px 40px rgba(38, 50, 56, .10);
  --sh-3: 0 8px 24px rgba(38, 50, 56, .10), 0 32px 70px rgba(38, 50, 56, .16);
  --sh-4: 0 18px 50px rgba(38, 50, 56, .18), 0 64px 120px rgba(38, 50, 56, .22);
  --sh-brand: 0 10px 26px rgba(255, 90, 54, .32);
  --sh-brand-lg: 0 18px 46px rgba(255, 90, 54, .42);
  --sh-glow: 0 0 70px rgba(255, 90, 54, .40);
  --sh-inset-hair: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* =========================================================================
   * 8. 布局 Layout
   * ====================================================================== */
  --container: 1200px;
  --container-wide: 1440px;
  --container-narrow: 860px;
  --page-x: clamp(18px, 4vw, 48px);
  --nav-h: 68px;
  --nav-h-sm: 58px;
  --cartbar-h: 72px;

  /* =========================================================================
   * 9. 动效 Motion
   * ====================================================================== */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.2, .9, .25, 1.15);

  --dur-1: 160ms;
  --dur-2: 300ms;
  --dur-3: 520ms;
  --dur-4: 820ms;
  --dur-5: 1200ms;

  /* =========================================================================
   * 10. 层级 Z-index
   * ====================================================================== */
  --z-bg: 0;
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-dock: 120;
  --z-drawer: 140;
  --z-toast: 200;

  /* =========================================================================
   * 11. 语义别名（供深色区块内部覆写使用）
   * ====================================================================== */
  --surface: var(--c-white);
  --surface-page: var(--c-cream);
  --text-1: var(--c-ink);
  --text-2: var(--c-ink-68);
  --text-3: var(--c-ink-55);
}

/* ---------------------------------------------------------------------------
 * 深色场景（Hero / CTA 带）：只覆写语义别名，组件代码无需感知明暗
 * ------------------------------------------------------------------------ */
.is-dark,
[data-theme="dark"] {
  --surface: var(--c-ink);
  --surface-page: var(--c-ink);
  --text-1: var(--c-white);
  --text-2: var(--c-white-64);
  --text-3: var(--c-white-34);
  --c-line: var(--c-line-invert);
}

/* ---------------------------------------------------------------------------
 * 系统级「减少动态效果」偏好：交由 base.css 统一降级
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
  }
}