/* =========================================================================
 * tokens.css — 设计系统变量（单一事实来源）
 * 视觉规范：费乐 FEELO 风 —— 暖红品牌色 + 多彩卡片（黄/蓝/青/红）
 * 浅灰蓝背景、纯白卡片、大圆角、柔和阴影、手机优先。
 * 本文件仅定义 :root 变量，不输出任何样式规则。
 * ========================================================================= */

:root {
  /* ---- 品牌色（费乐红）---- */
  --brand: #FF4D2E;             /* 主按钮、选中态、强调标签 */
  --brand-deep: #E63E22;        /* 按下加深 */
  --brand-soft: #FFEEE9;        /* 浅红底标签 / 选中背景 */
  --accent-blue: #3B6CFF;       /* 图纸 Tab / 蓝色横幅卡 */
  --accent-blue-soft: #EAF0FF;
  --accent-teal: #12B8A6;       /* 青色横幅卡 / 辅助强调 */
  --accent-teal-soft: #E3F8F5;
  --accent-yellow: #FFC53D;     /* 黄色横幅卡 */
  --accent-yellow-soft: #FFF4D9;
  --accent-orange: #FF9F0A;     /* 书架 Tab */

  /* ---- 中性色 ---- */
  --bg: #F6F7FB;                /* 全局页面背景（浅灰蓝） */
  --bg-card: #FFFFFF;           /* 卡片 / 浮层 / 底部栏背景 */
  --text-primary: #1F2329;      /* 标题、正文 */
  --text-secondary: #8A8F99;    /* 辅助说明、货号、时间 */
  --text-tertiary: #B9BEC7;     /* 占位符、禁用态 */
  --border-soft: #EDEFF4;       /* 分割线、卡片边框 */
  --divider: #E7E9F0;           /* 浅分隔线 */

  --status-warn: #F59E0B;       /* 提示 */
  --status-error: #EF4444;      /* 错误、删除 */
  --shadow-color: rgba(31, 41, 55, 0.07);

  /* ---- 字体 ---- */
  --font-family: "PingFang SC", "Noto Sans SC", system-ui, -apple-system,
    "Microsoft YaHei", sans-serif;
  --fs-h1: 22px;
  --fs-h2: 17px;
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-caption: 12px;
  --fs-small: 11px;

  /* ---- 间距（基础单位 4px）---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ---- 圆角 ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---- 阴影与层级 ---- */
  --shadow-card: 0 2px 12px rgba(31, 41, 55, 0.06);
  --shadow-float: 0 6px 24px rgba(31, 41, 55, 0.10);
  --shadow-button: 0 4px 12px rgba(255, 77, 46, 0.28);

  /* ---- 安全区（刘海 / 底部 Home 条）---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---- 布局 ---- */
  --app-max-width: 480px;       /* 桌面端居中手机框 */
  --tabbar-height: 58px;
  --statusbar-height: 44px;
}