/* ==========================================================================
   食光机 FoodTime — Design Tokens v1.0
   设计语言：Warm Organic Tech（温暖有机 × 克制科技）
   所有页面必须 @import 本文件，禁止另起一套色板 / 字号。
   ========================================================================== */

:root {
  /* ---------- Brand / Semantic Color ---------- */
  --fm-green-900: #083023;
  --fm-green-800: #0A4A36;
  --fm-green-700: #0C6C4C;
  --fm-green-600: #0E9F6E;   /* PRIMARY 保鲜绿 */
  --fm-green-500: #21B583;
  --fm-green-300: #7DD8B4;
  --fm-green-100: #D6F2E5;
  --fm-green-50:  #EEF9F3;

  --fm-amber-600: #E08A00;   /* 临期 3 天内 */
  --fm-amber-100: #FDF0D5;
  --fm-orange-600:#F26B22;   /* CTA / 转化 */
  --fm-orange-100:#FFEBDF;
  --fm-red-600:   #DC3F45;   /* 已过期 / 危险 */
  --fm-red-100:   #FDE7E7;
  --fm-blue-600:  #2F6FED;   /* 运动数据 */
  --fm-blue-100:  #E4EDFE;
  --fm-violet-600:#7357E6;   /* 睡眠数据 */
  --fm-violet-100:#EDE9FD;
  --fm-teal-600:  #0E8C9F;   /* 饮水 / 其它 */

  /* ---------- Warm Neutral ---------- */
  --fm-ink-900: #12211B;     /* 主文字 */
  --fm-ink-700: #3A4B43;     /* 次文字 */
  --fm-ink-500: #6B7C73;     /* 辅助 */
  --fm-ink-400: #8B9A92;
  --fm-ink-300: #B3BFB8;     /* 占位 */
  --fm-line:    #E6E3DA;     /* 分割线 */
  --fm-line-2:  #F0EDE4;
  --fm-bg:      #F7F4EC;     /* 页面底 · 米白 */
  --fm-bg-2:    #FBF9F3;
  --fm-surface: #FFFFFF;
  --fm-ink-inv: #FFFFFF;

  /* ---------- Dark surface (硬件页 / 数据页) ---------- */
  --fm-dark-900:#0B1512;
  --fm-dark-800:#12211B;
  --fm-dark-700:#1B2E26;
  --fm-dark-line:#264035;

  /* ---------- Typography ---------- */
  --fm-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
             "Noto Sans SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --fm-font-num: "SF Pro Display", "DIN Alternate", "Bahnschrift", "Inter",
             -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --fm-font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fm-fs-display: 46px;  --fm-lh-display: 1.14;
  --fm-fs-h1: 32px;       --fm-lh-h1: 1.22;
  --fm-fs-h2: 24px;       --fm-lh-h2: 1.3;
  --fm-fs-h3: 19px;       --fm-lh-h3: 1.4;
  --fm-fs-lg: 16px;       --fm-lh-lg: 1.65;
  --fm-fs-md: 14.5px;     --fm-lh-md: 1.7;
  --fm-fs-sm: 13px;       --fm-lh-sm: 1.6;
  --fm-fs-xs: 11.5px;     --fm-lh-xs: 1.5;

  /* ---------- Spacing (4pt grid) ---------- */
  --fm-s1: 4px;   --fm-s2: 8px;   --fm-s3: 12px;  --fm-s4: 16px;
  --fm-s5: 20px;  --fm-s6: 24px;  --fm-s8: 32px;  --fm-s10: 40px;
  --fm-s12: 48px; --fm-s14: 56px; --fm-s16: 64px; --fm-s20: 80px;
  --fm-s24: 96px; --fm-s30: 120px;

  /* ---------- Radius ---------- */
  --fm-r-xs: 6px;  --fm-r-sm: 10px; --fm-r-md: 14px;
  --fm-r-lg: 20px; --fm-r-xl: 28px; --fm-r-2xl: 36px; --fm-r-full: 999px;

  /* ---------- Elevation (green-tinted, soft) ---------- */
  --fm-e1: 0 1px 2px rgba(18,33,27,.05), 0 1px 1px rgba(18,33,27,.03);
  --fm-e2: 0 2px 8px rgba(18,33,27,.06), 0 1px 2px rgba(18,33,27,.04);
  --fm-e3: 0 8px 24px rgba(18,33,27,.08), 0 2px 6px rgba(18,33,27,.04);
  --fm-e4: 0 18px 48px rgba(18,33,27,.12), 0 4px 12px rgba(18,33,27,.06);
  --fm-e-green: 0 10px 30px rgba(14,159,110,.22);

  /* ---------- Motion ---------- */
  --fm-t-fast: 140ms cubic-bezier(.4,0,.2,1);
  --fm-t-base: 240ms cubic-bezier(.4,0,.2,1);
  --fm-t-slow: 420ms cubic-bezier(.16,1,.3,1);

  /* ---------- Layout ---------- */
  --fm-container: 1200px;
  --fm-container-wide: 1360px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--fm-font);
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-md);
  color: var(--fm-ink-900);
  background: var(--fm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,p,figure,ul,ol { margin: 0; }
ul,ol { padding: 0; list-style: none; }
img,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* ==========================================================================
   Shared Utilities & Components
   ========================================================================== */
.fm-container { width: 100%; max-width: var(--fm-container); margin-inline: auto; padding-inline: var(--fm-s6); }
.fm-container-wide { width: 100%; max-width: var(--fm-container-wide); margin-inline: auto; padding-inline: var(--fm-s6); }

.fm-display { font-size: var(--fm-fs-display); line-height: var(--fm-lh-display); font-weight: 800; letter-spacing: -.02em; }
.fm-h1 { font-size: var(--fm-fs-h1); line-height: var(--fm-lh-h1); font-weight: 780; letter-spacing: -.015em; }
.fm-h2 { font-size: var(--fm-fs-h2); line-height: var(--fm-lh-h2); font-weight: 720; letter-spacing: -.01em; }
.fm-h3 { font-size: var(--fm-fs-h3); line-height: var(--fm-lh-h3); font-weight: 680; }
.fm-lead { font-size: var(--fm-fs-lg); line-height: var(--fm-lh-lg); color: var(--fm-ink-700); }
.fm-sm { font-size: var(--fm-fs-sm); line-height: var(--fm-lh-sm); color: var(--fm-ink-500); }
.fm-xs { font-size: var(--fm-fs-xs); line-height: var(--fm-lh-xs); color: var(--fm-ink-500); }
.fm-num { font-family: var(--fm-font-num); font-variant-numeric: tabular-nums; }
.fm-muted { color: var(--fm-ink-500); }

/* Section header */
.fm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fm-green-700);
}
.fm-eyebrow::before { content:""; width: 22px; height: 2px; border-radius: 2px; background: var(--fm-green-600); }

/* Card */
.fm-card {
  background: var(--fm-surface);
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-lg);
  box-shadow: var(--fm-e1);
}
.fm-card-pad { padding: var(--fm-s6); }

/* Pill / Tag */
.fm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--fm-r-full);
  font-size: 12px; font-weight: 650; line-height: 1.6;
  background: var(--fm-green-100); color: var(--fm-green-800);
}
.fm-pill--warn { background: var(--fm-amber-100); color: #8A5200; }
.fm-pill--danger { background: var(--fm-red-100); color: #A02328; }
.fm-pill--info { background: var(--fm-blue-100); color: #1B4BB0; }
.fm-pill--neutral { background: var(--fm-line-2); color: var(--fm-ink-700); }

/* Button */
.fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--fm-r-full);
  font-size: 14.5px; font-weight: 680; white-space: nowrap;
  transition: transform var(--fm-t-fast), box-shadow var(--fm-t-fast), background var(--fm-t-fast);
}
.fm-btn:active { transform: translateY(1px); }
.fm-btn:focus-visible { outline: 3px solid var(--fm-green-300); outline-offset: 2px; }
.fm-btn--primary { background: var(--fm-green-600); color: #fff; box-shadow: var(--fm-e-green); }
.fm-btn--primary:hover { background: var(--fm-green-700); }
.fm-btn--cta { background: var(--fm-orange-600); color: #fff; box-shadow: 0 10px 30px rgba(242,107,34,.26); }
.fm-btn--ghost { background: transparent; color: var(--fm-ink-900); border: 1px solid var(--fm-line); }
.fm-btn--ghost:hover { border-color: var(--fm-green-600); color: var(--fm-green-700); }
.fm-btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }

/* Table */
.fm-table { font-size: var(--fm-fs-sm); }
.fm-table th {
  text-align: left; font-weight: 700; color: var(--fm-ink-700);
  padding: 11px 14px; background: var(--fm-bg-2);
  border-bottom: 1px solid var(--fm-line); white-space: nowrap;
}
.fm-table td { padding: 11px 14px; border-bottom: 1px solid var(--fm-line-2); vertical-align: top; }
.fm-table tr:last-child td { border-bottom: 0; }
.fm-table-wrap { border: 1px solid var(--fm-line); border-radius: var(--fm-r-md); overflow: hidden; overflow-x: auto; background: var(--fm-surface); -webkit-overflow-scrolling: touch; }
.fm-table-wrap .fm-table { min-width: 520px; }

/* Global top nav (每页共用) */
.fm-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,244,236,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--fm-line);
}
.fm-nav__inner { display: flex; align-items: center; gap: var(--fm-s6); height: 62px; }
.fm-nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.fm-nav__mark { width: 28px; height: 28px; border-radius: 9px; background: var(--fm-green-600); display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800; box-shadow: var(--fm-e-green); }
.fm-nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.fm-nav__link { padding: 8px 14px; border-radius: var(--fm-r-full); font-size: 13.5px; font-weight: 620; color: var(--fm-ink-700); transition: all var(--fm-t-fast); }
.fm-nav__link:hover { background: var(--fm-green-50); color: var(--fm-green-700); }
.fm-nav__link.is-active { background: var(--fm-green-600); color: #fff; }

/* Footer */
.fm-foot { border-top: 1px solid var(--fm-line); padding: var(--fm-s10) 0; margin-top: var(--fm-s20); color: var(--fm-ink-500); font-size: 12.5px; }

/* Confidential ribbon */
.fm-confid {
  background: var(--fm-dark-800); color: #C9D6CF;
  font-size: 11.5px; letter-spacing: .04em; text-align: center;
  padding: 7px 16px;
}
.fm-confid b { color: #F0C674; font-weight: 700; }

@media (max-width: 900px) {
  :root { --fm-fs-display: 34px; --fm-fs-h1: 26px; --fm-fs-h2: 21px; }
  .fm-nav__links { display: none; }
}

@media print {
  .fm-nav { position: static; }
  body { background: #fff; }
}