/* ==========================================================================
   tokens.css — 初见民宿酒店管理系统 · 设计令牌（Design Tokens）
   --------------------------------------------------------------------------
   用途：把散落在 style.css 里的 397 处硬编码颜色 / 18 种字号 / 15 种圆角
         收敛成一套可复用的变量。本文件**只定义变量，不写任何选择器样式**，
         因此对现有页面零影响（单独引入不会改变任何东西）。

   加载顺序（index.html）：style.css → tokens.css → ui-refresh.css
   回滚方式：删掉 index.html 里新增的这两个 <link> 即可，业务与 HTML 完全不受影响。

   命名约定：
     --brand*        品牌色（全局唯一一套蓝，用来消灭 #4f7cff / #1677ff / #1d6fd1 三套并存）
     --c-success / --c-warning / --c-danger / --c-info     语义色三层：主色 / 浅底 / 深字
       说明：这里刻意加 `c-` 前缀，避免和 style.css 已有的 --success/--warning/--danger
             同名造成循环引用；旧变量在 ui-refresh.css 里重定向过来。
     --st-*          房态四色（业务语义，色相不可改）
     --ch-*          渠道三色（业务语义，色相不可改）
     --ink-1..3      中性文字
     --line/--line-strong/--surface/--canvas               中性面与线
     --sp-1..8       间距（4px 基准）
     --fs-*          字号阶梯
     --r-*           圆角
     --sh-1..3       阴影三级
     --dur / --ease  动效
     --tap           最小可点击尺寸
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. 品牌色 —— 全局只有这一套蓝
     ------------------------------------------------------------------ */
  --brand:        #2F6BFF;   /* 主色：按钮、链接、选中态 */
  --brand-strong: #1B4FD8;   /* 深：hover / active */
  --brand-soft:   #EDF2FF;   /* 浅底：选中行、标签底、hover 底 */
  --brand-ink:    #1B4FD8;   /* 品牌色系上的文字（浅底深字，保证对比度） */
  --brand-ring:   rgba(47, 107, 255, .30);  /* 焦点环 */

  /* ------------------------------------------------------------------
     2. 语义色 —— 每个语义三层：主色（实心/描边）/ 浅底 / 深字
        浅底 + 深字 的组合均满足 WCAG AA 正文对比度（≥4.5:1）
     ------------------------------------------------------------------ */
  --c-success:      #16A34A;   /* 成功 / 空房干净 / 线下渠道 / 收入 */
  --c-success-soft: #E6F6EC;
  --c-success-ink:  #12803A;

  --c-warning:      #D97706;   /* 警告 / 待打扫 / 美团渠道 / 平台待结算 */
  --c-warning-soft: #FEF4E6;
  --c-warning-ink:  #A65A04;

  --c-danger:       #DC2626;   /* 危险 / 维修中 / 欠款 / 支出 */
  --c-danger-soft:  #FDECEC;
  --c-danger-ink:   #B91C1C;

  --c-info:         #2F6BFF;   /* 信息 / 长住挂账 —— 与品牌同色，避免再引入第二套蓝 */
  --c-info-soft:    #EDF2FF;
  --c-info-ink:     #1B4FD8;

  --c-neutral:      #6B7280;   /* 中性灰（已退房、占位） */
  --c-neutral-soft: #F1F3F6;
  --c-neutral-ink:  #4B5563;

  /* ------------------------------------------------------------------
     3. 房态四色（业务语义 —— 色相不可改，老板靠这个认房）
        空房干净=绿 / 待打扫=黄 / 入住中=蓝 / 维修中=红
     ------------------------------------------------------------------ */
  --st-vacant-clean: #16A34A;
  --st-vacant-dirty: #D97706;
  --st-occupied:     #2F6BFF;
  --st-maintenance:  #DC2626;

  /* 房态对应的浅底（用于标签底、日历格子底） */
  --st-vacant-clean-soft: #E6F6EC;
  --st-vacant-dirty-soft: #FEF4E6;
  --st-occupied-soft:     #EDF2FF;
  --st-maintenance-soft:  #FDECEC;

  /* ------------------------------------------------------------------
     4. 渠道三色（业务语义 —— 色相不可改）
        美团=黄 / 抖音=蓝 / 线下=绿
     ------------------------------------------------------------------ */
  --ch-meituan:      #D97706;
  --ch-meituan-soft: #FEF4E6;
  --ch-meituan-ink:  #A65A04;

  --ch-douyin:      #2F6BFF;
  --ch-douyin-soft: #EDF2FF;
  --ch-douyin-ink:  #1B4FD8;

  --ch-offline:      #16A34A;
  --ch-offline-soft: #E6F6EC;
  --ch-offline-ink:  #12803A;

  /* ------------------------------------------------------------------
     5. 中性色阶
     ------------------------------------------------------------------ */
  --ink-1: #1F2430;   /* 主文字 */
  --ink-2: #5A6478;   /* 次要文字 */
  --ink-3: #8A93A6;   /* 弱化 / 占位符 */
  --line:  #E8EAF0;   /* 分隔线（极浅，用于卡片描边） */
  --line-strong: #D8DDE8;  /* 稍深的线（输入框边框、表头下沿） */
  --surface: #FFFFFF; /* 卡片 / 弹窗 / 表格底 */
  --canvas:  #F5F7FA; /* 页面底色 */

  /* ------------------------------------------------------------------
     6. 间距（4px 基准）
     ------------------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* ------------------------------------------------------------------
     7. 字号阶梯
     ------------------------------------------------------------------ */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:14px;
  --fs-md:  15px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;

  /* ------------------------------------------------------------------
     8. 圆角
     ------------------------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-full: 999px;

  /* ------------------------------------------------------------------
     9. 阴影三级（克制风格：靠低透明度 + 大模糊，不靠黑边）
     ------------------------------------------------------------------ */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sh-2: 0 4px 10px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .05);
  --sh-3: 0 16px 40px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .08);

  /* ------------------------------------------------------------------
     10. 动效
     ------------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur:      180ms;
  --ease:     cubic-bezier(.2, .8, .2, 1);

  /* ------------------------------------------------------------------
     11. 触控：手机上最小可点击尺寸（Apple HIG / Material 建议 44px）
     ------------------------------------------------------------------ */
  --tap: 44px;

  /* 焦点环（全局复用） */
  --focus-ring: 0 0 0 3px var(--brand-ring);
}