/* ==========================================================================
   设计令牌（Design Tokens）· 前后台共用
   --------------------------------------------------------------------------
   设计系统：Data-Dense Dashboard
     · 风格关键词：多图表/组件、数据表、KPI 卡、最小内边距、网格布局、
                   空间高效、最大化数据可见性
     · 配色来源：ui-ux-pro-max 知识库 styles.csv #28 + colors.csv
       深蓝主色 + 琥珀强调色（Blue data + amber highlights）
     · 字体：Fira Sans（界面）+ Fira Code（数字/代码，等宽对齐）
     · 知识库明确警告：禁止华丽装饰，必须有筛选
   ========================================================================== */

:root {
  /* ======================================================================
     1. 字体
     Fira Sans 只覆盖拉丁字母与数字，中文由后面的系统字体接管。
     ====================================================================== */
  --font-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
               Consolas, 'Liberation Mono', monospace;

  /* ======================================================================
     2. 品牌色（知识库原文取值，未做主观改动）
     ====================================================================== */
  --primary:       #1E40AF;   /* Deep blue —— 主色 */
  --primary-fg:    #FFFFFF;   /* 主色上的文字 */
  --primary-hover: #1B3A9E;
  --secondary:     #3B82F6;   /* 次级蓝 */
  --accent:        #D97706;   /* 琥珀 —— 唯一强调色（只用于填充/边框） */
  --accent-text:   #B45309;   /* 琥珀的「文字版」：白底对比度 4.6:1，达 WCAG AA */
  --accent-fg:     #000000;
  --accent-soft:   #FEF3C7;

  /* ======================================================================
     3. 表面与文字
     ====================================================================== */
  --bg:            #F8FAFC;
  --bg-sunken:     #F1F5F9;
  --card:          #FFFFFF;
  --muted:         #E9EEF6;
  --border:        #DBEAFE;
  --border-strong: #BFDBFE;
  --fg:            #1E3A8A;
  --fg-body:       #1E293B;
  --muted-fg:      #475569;   /* 7.5:1 —— 可达标的次级文字 */
  --faint-fg:      #64748B;   /* 4.8:1 —— 仅用于装饰性文字，不承载信息 */
  --ring:          #1E40AF;

  /* ======================================================================
     4. 语义状态色（功能性配色，不占用「唯一强调色」名额）
        全部按「白底 ≥4.5:1」标定，实测达标
     ====================================================================== */
  --ok:        #15803D;  --ok-bg:     #DCFCE7;  --ok-border:     #86EFAC;
  --warn:      #92400E;  --warn-bg:   #FEF3C7;  --warn-border:   #FCD34D;
  --danger:    #B91C1C;  --danger-bg: #FEE2E2;  --danger-border: #FCA5A5;
  --info:      #1D4ED8;  --info-bg:   #DBEAFE;  --info-border:   #93C5FD;
  --neutral:   #475569;  --neutral-bg:#E9EEF6;  --neutral-border:#CBD5E1;

  /* ======================================================================
     5. 圆角（SHAPE CONSISTENCY LOCK：全站只用这 4 档，不许临时拍数字）
        sm  = 徽标 / 内联小块
        md  = 输入框 / 按钮
        lg  = 卡片 / 面板 / 表格容器
        pill= 只给状态胶囊用
     ====================================================================== */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:  10px;
  --r-pill: 999px;

  /* ======================================================================
     6. 间距（4 的倍数）
     ====================================================================== */
  --s-1:  4px;  --s-2:  6px;  --s-3:  8px;  --s-4: 12px;
  --s-5: 16px;  --s-6: 20px;  --s-7: 24px;  --s-8: 32px;  --s-9: 40px;

  /* ======================================================================
     7. z-index（固定层级表，禁止临时写 9999）
     ====================================================================== */
  --z-base:     0;
  --z-sticky:  10;
  --z-nav:     30;
  --z-dropdown:40;
  --z-modal:  100;
  --z-toast:  200;

  /* ======================================================================
     8. 阴影（tinted：用主色相着色，不用纯黑）
     ====================================================================== */
  --shadow-sm: 0 1px 2px rgba(30, 64, 175, .06);
  --shadow-md: 0 1px 2px rgba(30, 64, 175, .06), 0 2px 8px rgba(30, 64, 175, .07);
  --shadow-lg: 0 2px 8px rgba(30, 64, 175, .08), 0 12px 32px rgba(30, 64, 175, .13);

  /* ======================================================================
     9. 动效（baseline-ui 硬规则：只动 transform/opacity，交互反馈 ≤200ms）
     ====================================================================== */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 200ms;   /* baseline-ui 硬上限：交互反馈不得超过 200ms */
}

/* ==========================================================================
   深色模式
   修复缺陷：原来用纯 #000000，改成带蓝调的 off-black（避免 OLED 死黑 +
   与主色同色相）
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:       #3B82F6;
    --primary-fg:    #06122B;
    --primary-hover: #2563EB;
    --secondary:     #60A5FA;
    --accent:        #F59E0B;
    --accent-text:   #FBBF24;   /* 深色底上琥珀要提亮才够对比 */
    --accent-fg:     #1A1205;
    --accent-soft:   #422006;

    --bg:            #0B1120;
    --bg-sunken:     #070D1A;
    --card:          #111C33;
    --muted:         #1B2942;
    --border:        #1F3055;
    --border-strong: #2C4374;
    --fg:            #E8EEFB;
    --fg-body:       #CBD8EE;
    --muted-fg:      #A3B3D0;
    --faint-fg:      #7E8FAD;
    --ring:          #60A5FA;

    --ok:        #4ADE80;  --ok-bg:     #052E16;  --ok-border:     #166534;
    --warn:      #FBBF24;  --warn-bg:   #3A2A05;  --warn-border:   #854D0E;
    --danger:    #F87171;  --danger-bg: #3B0A0A;  --danger-border: #991B1B;
    --info:      #60A5FA;  --info-bg:   #0A1E3D;  --info-border:   #1E40AF;
    --neutral:   #A3B3D0;  --neutral-bg:#1B2942;  --neutral-border:#334155;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);
  }
}

/* ==========================================================================
   全局重置 + 可访问性底座
   ========================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题与数字排版规则 */
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
.tnum, .num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 键盘焦点环（不是可选装饰，是无障碍要求） */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 跳转到主内容（键盘用户必备） */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: 10px 16px; background: var(--primary); color: var(--primary-fg);
  border-radius: 0 0 var(--r-md) 0; z-index: var(--z-toast);
}
.skip-link:focus { left: 0; }

/* 屏幕阅读器专用 */
.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;
}

/* ==========================================================================
   尊重系统「减弱动态效果」
   修复缺陷：原来全库没有任何 prefers-reduced-motion 处理
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}