/* FreshTrack 登录后应用 · 设计令牌
 * 作用域限定在 .ft-app 内，全部前缀 --ft-，不污染官网/登录页的 --ink/--green 体系。
 * 深色跟随 legacy 的 :root[data-theme="dark"]，无需自己的开关。
 */

:root {
  /* 全部令牌只在 :root 声明：
     - 弹窗/抽屉/提示挂在 body 下也能取到变量
     - 深色（:root[data-theme="dark"]）能整体覆盖浅色（若同时声明在 .ft-app 上，
       元素自身的声明会压过祖先的深色值，导致"只有顶部变深、主区仍是浅色"）*/
  --ft-bg: #F6F7F5;
  --ft-surface: #FFFFFF;
  --ft-surface-2: #F1F4F0;
  --ft-surface-3: #E9EDE8;
  --ft-border: #E4E8E3;
  --ft-border-strong: #D2D9D2;

  /* 文字 */
  --ft-ink: #14201A;
  --ft-ink-2: #4A5A52;
  --ft-ink-3: #66756D;
  --ft-ink-inverse: #FFFFFF;

  /* 品牌与语义 */
  --ft-brand: #1F8A55;
  --ft-brand-strong: #14663F;
  --ft-brand-tint: #E7F4EC;
  --ft-brand-contrast: #FFFFFF;
  --ft-warn: #9A5B08;
  --ft-warn-tint: #FBF1E2;
  --ft-danger: #B3261E;
  --ft-danger-solid: #B3261E;   /* 按钮底色：白字对比度 6.5:1 */
  --ft-danger-tint: #FBEDEC;
  --ft-focus: #14663F;

  /* 营养素四色（明度差 ≥18%，色盲模拟可辨） */
  --ft-nutri-kcal: #1F8A55;
  --ft-nutri-protein: #3C7BE0;
  --ft-nutri-carbs: #D9911F;
  --ft-nutri-fat: #C4623F;

  /* 字号 / 行高 */
  --ft-fs-display: 30px; --ft-lh-display: 38px;
  --ft-fs-xl: 26px;      --ft-lh-xl: 32px;
  --ft-fs-title: 19px;   --ft-lh-title: 26px;
  --ft-fs-heading: 16px; --ft-lh-heading: 24px;
  --ft-fs-body: 15px;    --ft-lh-body: 24px;
  --ft-fs-label: 13px;   --ft-lh-label: 20px;
  --ft-fs-micro: 12px;   --ft-lh-micro: 18px;

  /* 间距（8pt 网格） */
  --ft-s1: 4px;  --ft-s2: 8px;  --ft-s3: 12px; --ft-s4: 16px;
  --ft-s5: 20px; --ft-s6: 24px; --ft-s8: 32px; --ft-s10: 40px; --ft-s14: 56px;

  /* 圆角（更现代的比例） */
  --ft-r-control: 12px;
  --ft-r-card: 18px;
  --ft-r-pill: 999px;
  --ft-r-chip: 10px;

  /* 阴影（分层更细腻：贴地 + 悬浮） */
  --ft-shadow-1: 0 1px 2px rgba(20, 32, 26, .05), 0 1px 1px rgba(20, 32, 26, .03);
  --ft-shadow-2: 0 10px 28px -14px rgba(20, 32, 26, .20), 0 2px 6px -2px rgba(20, 32, 26, .06);
  --ft-shadow-3: 0 20px 48px -20px rgba(20, 32, 26, .28), 0 4px 12px -6px rgba(20, 32, 26, .10);
  --ft-shadow-sheet: 0 -12px 40px -16px rgba(20, 32, 26, .26);
  --ft-ring-brand: 0 0 0 3px rgba(31, 138, 85, .18);

  /* 品牌渐变与表面渐变（提升质感，浅色下更"有价值感"） */
  --ft-grad-brand: linear-gradient(135deg, #1F8A55 0%, #14663F 100%);
  --ft-grad-card: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,1) 42%);

  /* 结构尺寸 */
  --ft-sidebar-w: 240px;
  --ft-rail-w: 72px;
  --ft-topbar-h: 56px;
  --ft-tabbar-h: 56px;
  --ft-content-max: 1200px;
  --ft-page-pad: clamp(16px, 3vw, 40px);

  /* 动效 */
  --ft-dur-hover: 120ms;
  --ft-dur-panel: 200ms;
  --ft-dur-data: 420ms;
  --ft-ease-out: cubic-bezier(.2, .8, .2, 1);

  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: var(--ft-fs-body);
  line-height: var(--ft-lh-body);
  color: var(--ft-ink);
  background: var(--ft-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] {
  --ft-bg: #0F1512;
  --ft-surface: #161E19;
  --ft-surface-2: #1D271F;
  --ft-surface-3: #243026;
  --ft-border: #26332B;
  --ft-border-strong: #334139;

  --ft-ink: #ECF2EE;
  --ft-ink-2: #B4C2BA;
  --ft-ink-3: #8B998F;

  --ft-brand: #3AAE73;
  --ft-brand-strong: #57C68E;
  --ft-brand-tint: #16301F;
  --ft-brand-contrast: #08130D;
  --ft-warn: #E0A94A;
  --ft-warn-tint: #2E2415;
  --ft-danger: #F2776B;
  --ft-danger-solid: #C6362A;   /* 深色下按钮底色：白字对比度 7.7:1（原来用浅珊瑚色只有 2.75） */
  --ft-danger-tint: #331B18;
  --ft-focus: #57C68E;

  --ft-shadow-1: 0 1px 2px rgba(0, 0, 0, .34);
  --ft-shadow-2: 0 10px 28px -14px rgba(0, 0, 0, .58), 0 2px 6px -2px rgba(0, 0, 0, .3);
  --ft-shadow-3: 0 20px 48px -20px rgba(0, 0, 0, .7), 0 4px 12px -6px rgba(0, 0, 0, .35);
  --ft-shadow-sheet: 0 -12px 40px -16px rgba(0, 0, 0, .68);
  --ft-ring-brand: 0 0 0 3px rgba(58, 174, 115, .24);
  --ft-grad-brand: linear-gradient(135deg, #2E9C63 0%, #1E7A4C 100%);
  --ft-grad-card: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 42%);
}

/* 数字统一等宽，保证表格/统计对齐 */
.ft-app .ft-num,
.ft-app .ft-metric-value,
.ft-app .ft-tile-value,
.ft-app .ft-bar-value,
.ft-app .ft-chart-tip-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  .ft-app *,
  .ft-app *::before,
  .ft-app *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}