/* ============================================
   设计令牌 · 品牌菜单成本结构平台
   方向：工业实用（Industrial）× 暖调餐饮
   主导表面色 = 暖近黑；强调色 = 橙金（利润/关键动作）
   ============================================ */

:root {
  /* —— 表面与文字（暖调近黑，避免纯黑白）—— */
  --color-bg: #14110f;
  --color-bg-raise: #1a1614;
  --color-surface: #201b18;
  --color-surface-2: #2a2421;
  --color-surface-3: #342d28;
  --color-text: #f7f1e8;
  --color-text-dim: #d8cec2;
  --color-muted: #a99e93;
  --color-faint: #7d7268;

  /* —— 边框 —— */
  --color-border: rgba(247, 241, 232, 0.1);
  --color-border-2: rgba(247, 241, 232, 0.18);
  --color-border-3: rgba(247, 241, 232, 0.3);

  /* —— 强调色：单页仅一个，留给关键动作 —— */
  --color-accent: #f0821e;
  --color-accent-dim: rgba(240, 130, 30, 0.14);
  --color-accent-line: rgba(240, 130, 30, 0.45);

  /* —— 语义色：盈利金 / 亏损红 —— */
  --color-profit: #e8b44a;
  --color-profit-dim: rgba(232, 180, 74, 0.16);
  --color-loss: #e0524a;
  --color-loss-dim: rgba(224, 82, 74, 0.16);
  --color-neutral: #6f6459;

  /* —— 成本结构条分段色（暖色阶梯，彼此可辨）—— */
  --seg-food: #6e5a42;
  --seg-activity: #c4703a;
  --seg-commission: #a75b3e;
  --seg-delivery: #8c6248;
  --seg-other: #5f5145;
  --seg-profit: #e8b44a;

  /* —— 堂食口径专属分段（与外卖段不重叠，便于跨渠道对照）—— */
  --seg-service: #7d6a4e;   /* 食材+米饭+服务耗材 */
  --seg-discount: #b0764a;  /* 堂食折扣（会员/代金券） */
  --seg-group: #94644f;     /* 团购券平台抽佣 */

  /* —— 渠道标识色：外卖偏橙、堂食偏青，跨渠道比价时成对出现 —— */
  --ch-takeaway: #f0821e;
  --ch-takeaway-dim: rgba(240, 130, 30, 0.14);
  --ch-dinein: #5fb3a8;
  --ch-dinein-dim: rgba(95, 179, 168, 0.14);

  /* —— 字体 —— */
  --font-display: "Archivo Black", "Noto Sans SC", sans-serif;
  --font-body: "IBM Plex Sans", "Noto Sans SC", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* —— 字阶（1.25 模块化比例）—— */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 18px;
  --fs-lg: 24px;
  --fs-xl: 34px;
  --fs-2xl: 48px;
  --fs-3xl: 68px;

  /* —— 间距梯度 —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* —— 圆角（工业风：小圆角为主）—— */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* —— 阴影三级（带环境色，非纯黑）—— */
  --shadow-1: 0 2px 8px rgba(10, 7, 5, 0.4);
  --shadow-2: 0 8px 28px rgba(10, 7, 5, 0.5);
  --shadow-3: 0 24px 64px rgba(10, 7, 5, 0.6);

  /* —— 动效 —— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* —— 布局 —— */
  --sidebar-w: 248px;
  --topbar-h: 68px;
}