/* ============================================================
 * 社康绩效核算系统 - 基础样式 + CSS变量
 * 设计风格：文艺清新 / 柔和色调 / 圆角设计 / 微妙阴影
 * 不兼容旧版火狐，可使用现代CSS（Grid/Flexbox/CSS变量等）
 * ============================================================ */

/* ---- 设计令牌 ---- */
:root {
  /* 主色调 - 薰衣草蓝（沉稳而不失雅致） */
  --color-primary:          #7C83CC;
  --color-primary-light:    #9BA1D9;
  --color-primary-lighter:  #B8BCE6;
  --color-primary-lightest: #E8E9F5;
  --color-primary-dark:     #5E64A8;

  /* 辅助色 - 樱花粉 */
  --color-accent:           #F2A7B3;
  --color-accent-light:     #F7C2CB;
  --color-accent-lighter:   #FCE4E8;
  --color-accent-dark:      #E08896;

  /* 语义色 */
  --color-success:          #7EC8A0;
  --color-success-light:    #D4F0E0;
  --color-success-dark:     #5AA87C;
  --color-warning:          #F0C06E;
  --color-warning-light:    #FFF3DC;
  --color-warning-dark:     #D4A03C;
  --color-danger:           #E87878;
  --color-danger-light:     #FDE8E8;
  --color-danger-dark:      #C95050;
  --color-info:             #7CB8D9;
  --color-info-light:       #E0F0FA;

  /* 中性色 - 薄荷灰系 */
  --color-bg:               #F7F9FC;
  --color-bg-warm:          #FAF8F6;
  --color-card:             #FFFFFF;
  --color-border:           #E8ECF2;
  --color-border-light:     #F0F2F7;
  --color-text:             #2D3748;
  --color-text-secondary:   #6B7A90;
  --color-text-muted:       #9AA5B8;
  --color-text-placeholder: #B8C2D0;
  --color-overlay:          rgba(45, 55, 72, 0.45);

  /* 圆角 */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* 阴影 - 柔和微妙 */
  --shadow-xs:    0 1px 2px rgba(124, 131, 204, 0.04);
  --shadow-sm:    0 2px 4px rgba(124, 131, 204, 0.06);
  --shadow-md:    0 4px 12px rgba(124, 131, 204, 0.08);
  --shadow-lg:    0 8px 24px rgba(124, 131, 204, 0.10);
  --shadow-xl:    0 12px 40px rgba(124, 131, 204, 0.14);
  --shadow-inner: inset 0 2px 4px rgba(124, 131, 204, 0.06);

  /* 字体 */
  --font-sans: 'LXGW WenKai', -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.8125rem;  /* 13px */
  --font-size-base: 0.875rem;   /* 14px */
  --font-size-md:   1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-tight:  1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* 间距 */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* 过渡 */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* 侧边栏 */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 68px;
  --header-height: 60px;
}

/* ---- 重置与基础 ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
}

/* ---- 排版 ---- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl);  }
h4 { font-size: var(--font-size-lg);  }
h5 { font-size: var(--font-size-md);  }
h6 { font-size: var(--font-size-base);}

p {
  margin-bottom: var(--space-4);
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-dark);
}

small {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: var(--color-primary-lightest);
  color: var(--color-primary-dark);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* ---- 选择器工具 ---- */
.text-primary   { color: var(--color-primary); }
.text-success   { color: var(--color-success-dark); }
.text-warning   { color: var(--color-warning-dark); }
.text-danger    { color: var(--color-danger-dark); }
.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-sm        { font-size: var(--font-size-sm); }
.text-lg        { font-size: var(--font-size-lg); }
.font-mono      { font-family: var(--font-mono); }
.font-medium    { font-weight: var(--font-weight-medium); }
.font-semibold  { font-weight: var(--font-weight-semibold); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.grid { display: grid; }

.w-full { width: 100%; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 滚动条美化 ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ---- 选择文本颜色 ---- */
::selection {
  background: var(--color-primary-lighter);
  color: var(--color-primary-dark);
}