/* =============================================================================
 *  tokens.css  ——  设计令牌（颜色 / 圆角 / 间距 / 字号 / 阴影）
 *  ──────────────────────────────────────────────────────────────────────────
 *  ★ 重要：精修样式时只动这一个文件。其他文件全部用 var(--xxx) 引用。
 *  ★ 亮/暗主题都靠这个文件 + [data-theme] 切换，不写死任何颜色。
 *  ★ 配套说明见《样式调整说明书.md》。
 * ============================================================================= */

:root,
[data-theme="light"] {
  /* —— 主色：橙色（强调/激活/进度条） —— */
  --color-primary:        #ff7a00;          /* 主强调橙（图表激活/进度条填充/胶囊激活） */
  --color-primary-deep:   #994700;          /* 深橙（hover/文字强调） */
  --color-primary-soft:   #ffdbc8;          /* 浅橙（提示背景/hover 容器） */
  --color-on-primary:     #ffffff;          /* 主色上的文字 */

  /* —— 营养素三色（碳水橙 / 蛋白紫 / 脂肪蓝） —— */
  --color-macro-carbs:    #ff7a00;          /* 碳水 */
  --color-macro-protein:  #6b38d4;          /* 蛋白 */
  --color-macro-fat:      #005ac2;          /* 脂肪 */

  /* —— 多指标线（备用） —— */
  --color-line-green:     #10b981;          /* 灰绿（睡眠等正向指标） */
  --color-line-blue:      #6366f1;          /* 灰蓝 */

  /* —— 语义色 —— */
  --color-success:        #10b981;
  --color-warning:        #e6a23c;
  --color-danger:         #ba1a1a;

  /* —— 中性灰 / 文字 / 边框 —— */
  --color-text:           #111827;          /* 主文字 */
  --color-text-2:         #6b7280;          /* 次文字（单位/小标签） */
  --color-text-3:         #9ca3af;          /* 弱文字（占位） */
  --color-border:         #e5e7eb;          /* 边框/分割线 */
  --color-divider:        #f0f2f5;          /* 更浅的分割 */
  --color-heat-empty:     #f3f4f5;          /* 数据缺失灰 */

  /* —— 表面（背景/卡片/容器） —— */
  --color-bg:             #f8f9fa;          /* 页面背景 */
  --color-card:           #ffffff;          /* 卡片背景 */
  --color-card-2:         #ffffff;
  --color-input-bg:       #ffffff;
  --color-input-border:   #dde2e8;

  /* —— 阴影 —— */
  --shadow-card:    0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02);
  --shadow-card-hover: 0 6px 18px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03);
  --shadow-modal:   0 -8px 32px rgba(0,0,0,.12);
  --shadow-pop:     0 8px 24px rgba(0,0,0,.12);

  /* —— 圆角 —— */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   16px;   /* 卡片标准圆角 */
  --radius-xl:   20px;
  --radius-pill: 9999px; /* 胶囊（按钮/页签） */

  /* —— 间距 —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* —— 字体 —— */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
               "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-num:  "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
               "PingFang SC", "Microsoft YaHei", sans-serif;

  /* —— 字号 / 字重 / 行高（设计令牌） —— */
  --fs-display: 36px;   --fw-display: 700; --lh-display: 44px;   /* 卡片大数（桌面） */
  --fs-display-mobile: 28px; --fw-display: 700; --lh-display-mobile: 34px; /* 卡片大数（手机） */
  --fs-h1: 24px;        --fw-h1: 700;      --lh-h1: 32px;
  --fs-h2: 20px;        --fw-h2: 600;      --lh-h2: 28px;        /* 卡片标题 */
  --fs-h3: 18px;        --fw-h3: 600;      --lh-h3: 26px;
  --fs-body: 16px;      --fw-body: 400;    --lh-body: 24px;
  --fs-label: 14px;     --fw-label: 500;   --lh-label: 20px;
  --fs-unit: 12px;      --fw-unit: 400;    --lh-unit: 16px;
  --fs-mini: 10px;      --fw-mini: 500;    --lh-mini: 14px;

  /* —— 顶栏 / 侧栏 —— */
  --topbar-h: 64px;
  --side-w: 240px;

  /* —— 容器 —— */
  --container-max: 1200px;   /* 桌面端首页最大宽度（Bento 网格） */
  --gutter: 16px;            /* 卡片间隙 */
  --grid-margin: 24px;       /* 页面左右内边距 */
}

/* =============================================================================
 *  暗色主题（手机端 Dashboard 设计图就是暗色，已验证）
 * ============================================================================= */
[data-theme="dark"] {
  --color-primary:        #ff7a00;
  --color-primary-deep:   #ffb68b;
  --color-primary-soft:   #5c2800;
  --color-on-primary:     #ffffff;

  --color-macro-carbs:    #ff7a00;
  --color-macro-protein:  #a78bfa;
  --color-macro-fat:      #6d9fff;

  --color-line-green:     #34d399;
  --color-line-blue:      #818cf8;

  --color-text:           #f3f4f6;
  --color-text-2:         #9ca3af;
  --color-text-3:         #6b7280;
  --color-border:         #2e3132;
  --color-divider:        #1f2223;
  --color-heat-empty:     #1f2223;

  --color-bg:             #191c1d;
  --color-card:           #232628;
  --color-card-2:         #2a2e30;
  --color-input-bg:       #2a2e30;
  --color-input-border:   #3a3e40;

  --shadow-card:    0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.02);
  --shadow-card-hover: 0 6px 18px rgba(0,0,0,.5);
  --shadow-modal:   0 -8px 32px rgba(0,0,0,.6);
}