/* ============================================================
 *  YOMI Travel · Design Tokens
 *  ----------------------------------------------------------
 *  来源：YOMI-UI/src/styles.css（App 真实令牌）+ yomi-soft-business-ui Skill
 *  转换：oklch → hex（逐值换算，非近似）
 *
 *  品牌色纪律（沿用 App 规范）：
 *    · 橙色只出现在 CTA / 价格 / 关键状态点
 *    · 禁止橙色大面积铺底、作卡片底、作副文色
 *    · Logo 使用客户原色 #FF7A01，界面主色统一 #F2871E
 * ============================================================ */

:root {
  /* ---------- 1. 品牌橙 Brand ---------- */
  --brand-50: #fdf5ed;   /* 柔橙雾 · 页面暖底 */
  --brand-100: #fcead6;
  --brand-200: #fadcb8;
  --brand-300: #f8c287;
  --brand-500: #f2871e;  /* 品牌橙 · 界面主色 */
  --brand-700: #c26406;  /* 价格深橙 · 保证小字对比度 */
  --logo-orange: #ff7a01; /* 客户 Logo 原色 · 仅用于 Logo */
  --logo-orange-2: #fe8901;
  --logo-ink: #0b1a2e;    /* 客户 Logo 原色墨蓝 · 仅用于 Logo */

  --grad-brand: linear-gradient(180deg, #f79a3e 0%, #f2871e 100%);
  --grad-brand-soft: linear-gradient(135deg, #fff7ee 0%, #fdf5ed 100%);
  --grad-haze-top: linear-gradient(180deg, #fdf5ed 0%, #fefaf6 45%, #ffffff 100%);
  --grad-haze-bottom: linear-gradient(180deg, #ffffff 0%, #fdf7f1 100%);

  /* ---------- 2. 海军墨 Ink ---------- */
  --ink-50: #f0f3f8;
  --ink-100: #dde4ed;
  --ink-200: #c5d0de;
  --ink-300: #8b98ad;
  --ink-400: #5c6b82;
  --ink-500: #1e2a44;   /* 主文字 */
  --ink-900: #16203a;   /* 深底区块 */
  --grad-ink: linear-gradient(160deg, #26324e 0%, #16203a 100%);

  /* ---------- 3. 中性 Neutral ---------- */
  --n-0: #ffffff;
  --n-50: #f6f8fc;
  --n-100: #edf0f5;
  --n-200: #dbe3ec;
  --n-300: #e2e8f0;

  /* ---------- 4. 功能色 Functional（低饱和） ---------- */
  --success-50: #ebf2ee;
  --success-500: #5e8e76;
  --warning-50: #f6f0e2;
  --warning-500: #b89244;
  --danger-50: #f5eaea;
  --danger-500: #c26b6b;
  --info-50: #eef2f7;
  --info-500: #5b7ba5;
  --wechat: #09bb07;

  /* ---------- 5. 字体（系统栈 · 零外部字体请求） ---------- */
  --ff-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 4 级字号（App 基准） */
  --fs-display: 32px;
  --fs-title: 22px;
  --fs-head: 18px;
  --fs-body: 15px;
  --fs-callout: 17px;
  --fs-label: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- 6. 间距 · 4px 基准 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;

  /* ---------- 7. 圆角 ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-3xl: 28px;
  --r-pill: 999px;

  /* ---------- 8. 阴影（偏冷海军墨，与暖橙形成冷外暖内） ---------- */
  --sh-sm: 0 2px 8px rgba(20, 40, 70, .05);
  --sh-md: 0 9px 24px rgba(20, 40, 70, .08);
  --sh-lg: 0 16px 40px rgba(20, 40, 70, .12);
  --sh-xl: 0 24px 58px rgba(18, 32, 54, .22);
  --sh-brand: 0 6px 16px rgba(242, 135, 30, .24);
  --sh-brand-lg: 0 12px 32px -12px rgba(242, 135, 30, .38);

  /* ---------- 9. 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;

  /* ---------- 10. 布局 ---------- */
  --w-container: 1180px;
  --w-narrow: 760px;
  --h-header: 68px;
  --z-sticky: 200;
  --z-drawer: 800;
  --z-toast: 1000;
}

@media (max-width: 900px) {
  :root {
    --h-header: 60px;
    --fs-display: 27px;
    --fs-title: 20px;
  }
}