/* ============================================================
   KEKE 企业管理平台 · 静态 Demo
   base.css — 设计令牌 / 重置 / 排版 / 工具类
   视觉语言参考 PreAdmin(Kanakku)：紫主色 + 浅灰底 + 白卡 + 细边框
   ============================================================ */

:root {
  /* ---------- 主色体系 ---------- */
  --primary: #7539FF;
  --primary-rgb: 117, 57, 255;
  --primary-hover: #3D0EBF;
  --primary-soft: #F8F5FF;      /* 浅底（选中/标签） */
  --primary-200: #DFDCFF;       /* 渐变高光 */
  --primary-gradient: linear-gradient(135deg, #8351FD 0%, #5112A9 100%);

  /* ---------- 语义色 ---------- */
  --secondary: #2E3B48;
  --success: #27AE60;   --success-soft: #F4FBF7;
  --info: #06AED4;      --info-soft: #F4F9FE;
  --danger: #EF1E1E;    --danger-soft: #FEF4F4;
  --warning: #E2B93B;   --warning-soft: #FEFBF5;
  --teal: #0E9384;      --teal-soft: #E9F5F4;
  --pink: #DD2590;      --pink-soft: #FDF4F9;
  --indigo: #3538CD;    --indigo-soft: #EDEDFB;
  --gold: #C9A227;      --gold-soft: #FBF6E4;   /* 品牌金：仅用于徽标与品牌标识 */

  /* ---------- 中性 ---------- */
  --light: #F7F8F9;            /* 页面底色 */
  --light-2: #FCFCFD;          /* 悬停底 */
  --surface: #FFFFFF;
  --border: #E2E4E6;
  --border-soft: #EDF0F2;
  --heading: #051321;
  --body: #5D6772;
  --muted: #90979F;
  --faint: #AAB0B6;

  /* ---------- 侧边栏（深色菜单） ---------- */
  --sidebar-bg: #051321;
  --sidebar-item: #AAB0B6;
  --sidebar-title: #FFFFFF;
  --sidebar-hover: rgba(255, 255, 255, .07);
  --sidebar-active: rgba(255, 255, 255, .10);

  /* ---------- 圆角 ---------- */
  --r-xs: 4px;
  --r-sm: 5px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  --sh-1: 0 .125rem .25rem rgba(93, 104, 114, .15);       /* 控件 */
  --sh-2: 0px 4px 20px 0px rgba(92, 92, 92, .07);          /* 卡片 */
  --sh-3: 0px 4px 3px 0px rgba(126, 126, 126, .10);         /* 悬浮 */
  --sh-pop: 0 8px 28px rgba(19, 16, 34, .14);

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

  /* ---------- 字号（11 级） ---------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-31: 31px;

  /* ---------- 行距（4 档） ---------- */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-loose: 1.75;

  /* ---------- 字重 ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---------- 尺寸 ---------- */
  --sidebar-w: 276px;
  --sidebar-w-collapsed: 70px;
  --topbar-h: 55px;
  --rail-h: 44px;

  --font: "Inter", "Instrument Sans", "HarmonyOS Sans SC", "PingFang SC",
    "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--body);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

::selection { background: rgba(var(--primary-rgb), .12); color: var(--heading); }

/* 滚动条 */
.scroll-thin { scrollbar-width: thin; scrollbar-color: #C6CACE transparent; }
.scroll-thin::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: #C6CACE; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #AAB0B6; background-clip: content-box; }
.scroll-dark { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.scroll-dark::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-dark::-webkit-scrollbar-track { background: transparent; }
.scroll-dark::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.scroll-dark::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); background-clip: content-box; }

/* ---------- 文本工具 ---------- */
.t-eyebrow { font-size: var(--fs-11); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.t-num { font-variant-numeric: tabular-nums; }
.t-muted { color: var(--muted); }
.t-2 { color: var(--body); }
.t-3 { color: var(--muted); }
.t-sm { font-size: var(--fs-13); }
.t-xs { font-size: var(--fs-12); }
.t-strong { font-weight: 650; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-nowrap { white-space: nowrap; }
.t-gold { color: var(--gold); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- 图标 ---------- */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  line-height: 0;
}
.ico svg { width: 100%; height: 100%; display: block; }
.ico--sm { width: 14px; height: 14px; }
.ico--lg { width: 20px; height: 20px; }
.ico--xl { width: 24px; height: 24px; }

/* ---------- 徽标 / 标签 ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--light);
  color: var(--body);
}
.chip--gold { background: var(--gold-soft); color: #8A6E0C; }
.chip--ok, .chip--success { background: var(--success-soft); color: var(--success); }
.chip--warn, .chip--warning { background: var(--warning-soft); color: #A6811B; }
.chip--danger { background: var(--danger-soft); color: var(--danger); }
.chip--info { background: var(--info-soft); color: var(--info); }
.chip--violet, .chip--primary { background: var(--primary-soft); color: var(--primary); }
.chip--cyan, .chip--teal { background: var(--teal-soft); color: var(--teal); }
.chip--pink { background: var(--pink-soft); color: var(--pink); }
.chip--outline { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.chip__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- 分隔 ---------- */
.hr { height: 1px; background: var(--border-soft); border: 0; margin: 0; }
.hr--dash { background: none; border-top: 1px dashed var(--border); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}