/* ==========================================================================
   茱萸 ZhuYu Design System — 设计令牌 (Tokens)
   Style: Modern Zen & Clean Flat (新禅意极简扁平)
   ========================================================================== */

:root {
  /* 字体族规范 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: "Noto Serif SC", "Songti SC", STSong, "Source Han Serif SC", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 基础底色 - 素纸与茶香 */
  --bg-app: #f7f6f2;             /* 页面基底：温润宣纸微灰 */
  --bg-surface: #ffffff;         /* 容器卡片：纯净素白 */
  --bg-subtle: #f3efe8;          /* 次级浅色：表头、输入框背景 */
  --bg-hover: #ebe6dc;           /* 交互悬浮状态底色 */
  --bg-active: #e2dcd0;          /* 交互激活态底色 */

  /* 侧边栏色阶 (沉静墨黛) */
  --bg-sidebar: #192026;         /* 墨黛青黑色 */
  --sidebar-text: #9ca6af;       /* 次级菜单文字 */
  --sidebar-text-hover: #ffffff; /* 悬浮高亮文字 */
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-item-active: rgba(197, 155, 39, 0.16);
  --sidebar-active-gold: #c59b27;/* 选中指示金 */
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* 墨色文字体系 */
  --text-primary: #1e262c;       /* 主标题与正文：沉稳黛黑 */
  --text-secondary: #5e6871;     /* 次级说明：淡墨灰 */
  --text-tertiary: #8e98a2;      /* 占位符与辅助注释：浅灰 */
  --text-disabled: #b5bec6;      /* 禁用文字 */
  --text-inverse: #ffffff;

  /* 品牌金 - 温润琉璃金 (克制点缀，去浮夸刺眼亮黄) */
  --primary: #c59b27;
  --primary-hover: #b3881b;
  --primary-active: #9e7514;
  --primary-subtle: #fbf6ea;     /* 金色微透浅底 */
  --primary-border: #e8d7a4;     /* 金色 1px 精细边框 */
  --primary-text: #967015;

  /* 极简边线体系 (Border-driven UI) */
  --border-light: #e8e4dc;       /* 默认浅分割线与卡片边框 */
  --border-subtle: #f0ece4;      /* 表格内更轻细线 */
  --border-strong: #d5cfc2;      /* 强调框线/Hover边线 */
  --border-focus: #c59b27;       /* 聚焦金边 */

  /* 语义功能色 (低饱和，扁平克制) */
  --status-success: #15803d;
  --status-success-bg: #f0fdf4;
  --status-success-border: #bbf7d0;

  --status-warning: #b45309;
  --status-warning-bg: #fffbeb;
  --status-warning-border: #fde68a;

  --status-danger: #b91c1c;
  --status-danger-bg: #fef2f2;
  --status-danger-border: #fecaca;

  --status-info: #1d4ed8;
  --status-info-bg: #eff6ff;
  --status-info-border: #bfdbfe;

  /* 性别标识色 */
  --male-color: #1d4ed8;
  --male-bg: #eff6ff;
  --male-border: #bfdbfe;

  --female-color: #be185d;
  --female-bg: #fdf2f8;
  --female-border: #fbcfe8;

  --mixed-color: #6b21a8;
  --mixed-bg: #faf5ff;
  --mixed-border: #e9d5ff;

  /* 间距刻度 (8px 网格) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* 圆角规范 */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* 纯扁平极简阴影 (去厚重浮雕) */
  --shadow-none: none;
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 12px 32px rgba(25, 32, 38, 0.12);

  /* 文字字阶规范 (Type Scale) */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;

  /* 动效过渡 */
  --transition-fast: 0.15s cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 0.22s cubic-bezier(0.2, 0, 0, 1);
}

/* 全局重置与基础规范 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  width: 100%;
  min-height: 100vh;
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 15px;
}

/* 统一轻量滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d8d3c7;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: #bfb8a8;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}