/* ============================================================
   设计系统 · 基础层
   ── 设计令牌 / 重置 / 排版 / 工具类
   风格基调：克制、专业、有呼吸感。
   色彩只用一套主色 + 一套暖调中性色阶 + 四种功能色，
   所有间距、圆角、阴影、动效都取自下面这几张刻度表，
   不在组件里手写魔法数字。
   ============================================================ */

/* ============ 1. 设计令牌 ============ */
:root {
  /* —— 主色（Indigo，只此一种） —— */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;
  --brand-800: #3730A3;

  /* —— 中性色阶（Stone 暖灰，比纯冷灰更有质感） —— */
  --gray-0:   #FFFFFF;
  --gray-50:  #FAFAF9;
  --gray-100: #F5F5F4;
  --gray-200: #E7E5E4;
  --gray-300: #D6D3D1;
  --gray-400: #A8A29E;
  --gray-500: #78716C;
  --gray-600: #57534E;
  --gray-700: #44403C;
  --gray-800: #292524;
  --gray-900: #1C1917;
  --gray-950: #0C0A09;

  /* —— 功能色（四种，与主色合计五种） —— */
  --success: #059669;
  --warning: #D97706;
  --danger:  #DC2626;
  --info:    #0284C7;
  --purple:  #7C3AED;

  /* —— 功能色的浅底（用于标签/提示块） —— */
  --success-bg: #ECFDF5;
  --warning-bg: #FFFBEB;
  --danger-bg:  #FEF2F2;
  --info-bg:    #F0F9FF;

  /* ============ 语义令牌（浅色） ============
     注意：不要在这里写 `var(--brand-600)` 形式的自引用 —— CSS 变量解析
     自指会退到 initial（背景变透明、border 变无），主按钮就会"消失"。 */
  --brand:         #4F46E5;
  --brand-050:     #F5F6FF;
  --brand-100:     #E0E7FF;
  --brand-600:     #4F46E5;

  --bg:            #F7F7F6;   /* 页面底色，比纯白更柔和 */
  --bg-elevated:   var(--gray-0);
  --surface:       var(--gray-0);
  --surface-2:     var(--gray-50);
  --surface-hover: var(--gray-100);

  --text:          var(--gray-900);
  --text-2:        var(--gray-700);
  --muted:         var(--gray-500);

  --border:        #E8E6E3;
  --border-strong: var(--gray-300);

  --sidebar-bg:    #FBFAF9;
  --sidebar-w:     252px;
  --topbar-h:      60px;

  --chart-grid:    #EDEBE8;
  --chart-axis:    var(--gray-400);

  /* ============ 字体 ============ */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-num: "SF Mono", ui-monospace, "JetBrains Mono", "Roboto Mono",
              Menlo, Consolas, monospace;

  /* ============ 字号阶梯 ============ */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  30px;
  --fs-5xl:  36px;

  /* ============ 行高 ============ */
  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.6;

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

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

  /* ============ 圆角 ============ */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-2xl:  18px;
  --r-full: 999px;
  --radius:    var(--r-md);   /* 兼容旧名 */
  --radius-lg: var(--r-xl);

  /* ============ 阴影（极轻、多层、暖调） ============ */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, .04);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .05), 0 1px 3px rgba(28, 25, 23, .04);
  --shadow-md: 0 2px 4px rgba(28, 25, 23, .04), 0 4px 12px rgba(28, 25, 23, .05);
  --shadow-lg: 0 4px 8px rgba(28, 25, 23, .04), 0 12px 28px rgba(28, 25, 23, .08);
  --shadow-xl: 0 8px 16px rgba(28, 25, 23, .06), 0 24px 48px rgba(28, 25, 23, .12);
  --shadow:      var(--shadow-sm);   /* 兼容旧名 */
  --shadow-lg-c: var(--shadow-lg);

  /* ============ 动效（150–300ms） ============ */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* ============ 层级 ============
     顺序：内容 < 顶栏 < 遮罩 < 侧边栏抽屉 < Toast < 弹窗。
     侧边栏必须高于遮罩 —— 手机抽屉打开时，遮罩盖的是内容区，
     侧边栏要露在遮罩之上才点得到导航，否则抽屉一开就点不动。 */
  --z-sticky:  100;
  --z-mask:    300;
  --z-sidebar: 350;
  --z-toast:   400;
  --z-modal:   500;
}

/* ============ 2. 深色模式 ============
   不是简单反色：底色用暖黑而非纯黑，卡片靠「略高于底色」的明度区分，
   主色提亮一档（深色背景下原主色会发闷），阴影改由描边承担。 */
[data-theme="dark"] {
  --brand:         #818CF8;
  --brand-050:     #1E1B3A;
  --brand-100:     #312E81;
  --brand-600:     #818CF8;

  --bg:            #100E0D;
  --bg-elevated:   #1A1716;
  --surface:       #1A1716;
  --surface-2:     #221F1D;
  --surface-hover: #292524;

  --text:          #F2F0EE;
  --text-2:        #C4BFB9;
  --muted:         #8A837C;

  --border:        #2A2624;
  --border-strong: #3A3532;

  --sidebar-bg:    #151312;

  --chart-grid:    #2A2624;
  --chart-axis:    #6B655F;

  --success: #34D399;
  --warning: #FBBF24;
  --danger:  #F87171;
  --info:    #38BDF8;
  --purple:  #A78BFA;

  --success-bg: rgba(52, 211, 153, .12);
  --warning-bg: rgba(251, 191, 36, .12);
  --danger-bg:  rgba(248, 113, 113, .12);
  --info-bg:    rgba(56, 189, 248, .12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, .55);
  --shadow:      var(--shadow-sm);
  --shadow-lg-c: var(--shadow-lg);
}

/* ============ 3. 重置 ============ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  transition: background-color var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--text);
}

p, li { line-height: var(--lh-base); }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--brand-700); }
[data-theme="dark"] a:hover { color: var(--brand-300); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

svg { display: block; flex: none; }

ul, ol { list-style: none; }

img { max-width: 100%; display: block; }

code {
  font-family: var(--font-num);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
}

table { border-collapse: collapse; border-spacing: 0; }

hr {
  border: none;
  height: 1px;
  background: var(--border);
}

::selection {
  background: var(--brand-100);
  color: var(--brand-800);
}
[data-theme="dark"] ::selection {
  background: rgba(129, 140, 248, .3);
  color: #fff;
}

/* 焦点环：只在键盘操作时出现，鼠标点击不显示 —— 既不打扰，又保留无障碍 */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* ============ 4. 滚动条 ============ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
[data-theme="dark"] * {
  scrollbar-color: var(--gray-700) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
  transition: background var(--dur-fast) var(--ease);
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--gray-700); background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--gray-600); background-clip: content-box; }

/* ============ 5. 工具类 ============ */
.muted  { color: var(--muted); }
.mono   { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.num    { font-family: var(--font-num); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.danger { color: var(--danger); }

[hidden] { display: none !important; }

/* 视觉隐藏但对读屏软件可见 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ 6. 进入动效（页面与模块切换共用） ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}