/* ============================================================
   小米考勤 · Design Tokens
   Source of truth: 小米组件库及模板（HIIUI Pro） + 移动端常用元件库
   Primary: HIIUI Blue #1677ff · Semantic palette · 8pt spacing
   ============================================================ */

:root {
  /* ---------- Brand / primary (HIIUI Pro) ---------- */
  --brand-50:  #f2f8ff;
  --brand-100: #e6f4ff;
  --brand-200: #bae0ff;
  --brand-300: #91caff;
  --brand-400: #69b1ff;
  --brand-500: #4096ff;
  --brand:     #1677ff;
  --brand-600: #0958d9;
  --brand-700: #003eb3;
  --brand-grad: linear-gradient(135deg, #4b9bff 0%, #1677ff 52%, #0b5cdb 100%);
  --brand-glow: 0 10px 24px -6px rgba(22, 119, 255, .45);

  /* ---------- Xiaomi accent ---------- */
  --mi-orange:      #ff6900;
  --mi-orange-soft: #fff3e8;
  --mi-orange-deep: #d95300;

  /* ---------- Semantic (HIIUI Pro) ---------- */
  --success:      #00b42a;
  --success-soft: #e8ffea;
  --success-deep: #009a29;
  --warning:      #ff7d00;
  --warning-soft: #fff7e8;
  --warning-deep: #d96500;
  --danger:       #f53f3f;
  --danger-soft:  #ffece8;
  --danger-deep:  #cb2634;
  --purple:       #722ed1;
  --purple-soft:  #f5edff;
  --cyan:         #0fc6c2;
  --cyan-soft:    #e8fffb;

  /* ---------- Text / line / surface ---------- */
  --text-1: #1f2329;
  --text-2: #4e5969;
  --text-3: #86909c;
  --text-4: #a9aeb8;
  --line:   #ebedf2;
  --line-2: #f2f4f7;
  --bg:     #f5f7fa;
  --bg-2:   #eef1f6;
  --card:   #ffffff;
  --card-2: #fafbfc;
  --mask:   rgba(15, 23, 42, .45);
  --glass:  rgba(255, 255, 255, .82);

  /* ---------- Radius ---------- */
  --r-xs:  6px;
  --r-s:   8px;
  --r-m:   12px;
  --r-l:   16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .03), 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-2: 0 2px 6px rgba(15, 23, 42, .04), 0 12px 28px -8px rgba(15, 23, 42, .10);
  --shadow-3: 0 20px 48px -16px rgba(15, 23, 42, .22);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .03), 0 4px 16px -2px rgba(16, 24, 40, .05);

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
    "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Pro Display", "DIN Alternate", "Bahnschrift", "Segoe UI",
    var(--font-sans);
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-44: 44px;

  /* ---------- Metrics ---------- */
  --status-h: 44px;
  --nav-h: 48px;
  --tab-h: 62px;
  --gutter: 16px;
  --gap: 12px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .16s;
  --dur-2: .26s;
  --dur-3: .42s;
}

/* ============================================================
   Dark theme — same token contract, tuned for OLED
   Activated by body.theme-dark (设置 → 深色模式)
   ============================================================ */
body.theme-dark {
  --brand-50:  #0c1a2b;
  --brand-100: #0f2440;
  --brand-200: #123a63;
  --brand-300: #1a5c9e;
  --brand-400: #4b9bff;
  --brand-500: #69b1ff;
  --brand:     #4096ff;
  --brand-600: #1677ff;
  --brand-700: #0958d9;
  --brand-grad: linear-gradient(135deg, #2b74d6 0%, #175ac0 52%, #0f4699 100%);
  --brand-glow: 0 10px 24px -6px rgba(22, 119, 255, .35);

  --mi-orange-soft: #2b1a0e;

  --success:      #23c343;
  --success-soft: #10251a;
  --success-deep: #4ade80;
  --warning:      #ff9a2e;
  --warning-soft: #2a1f10;
  --warning-deep: #ffb65c;
  --danger:       #f76560;
  --danger-soft:  #2c1516;
  --danger-deep:  #ff8a84;
  --purple:       #a06bff;
  --purple-soft:  #1f1730;
  --cyan:         #2fd8d3;
  --cyan-soft:    #0d2424;

  --text-1: #f2f3f5;
  --text-2: #c9cdd4;
  --text-3: #8f959e;
  --text-4: #6b7280;
  --line:   #2a2e37;
  --line-2: #22262e;
  --bg:     #0f1115;
  --bg-2:   #15181e;
  --card:   #1a1d24;
  --card-2: #20242c;
  --mask:   rgba(0, 0, 0, .62);
  --glass:  rgba(20, 23, 29, .84);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 12px 28px -8px rgba(0, 0, 0, .55);
  --shadow-3: 0 20px 48px -16px rgba(0, 0, 0, .7);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 16px -2px rgba(0, 0, 0, .3);
}