/* =====================================================================
   aurora_fresh · 设计令牌层（Design Tokens）
   ---------------------------------------------------------------------
   职责：
     1. 定义全主题唯一的 CSS 变量（配色 / 圆角 / 阴影 / 间距 / 字体 / 动效 / 层级）
     2. 全局 reset：统一盒模型、字体栈、背景、链接、滚动条、选中态
     3. 通用工具类（.f-* 前缀，供新写页面使用）
   加载顺序：bootstrap → icons → app.min → [插件] → fresh-tokens（本文件第一个）
   注意：本文件只放"变量与基础"，不放任何布局与组件样式
   ===================================================================== */

/* ---------- 0. 设计变量 ---------- */
:root {
  /* 主色：青蓝（参考图「深色外壳」高亮强调：选中芯片 / 导航激活 / 聚焦） */
  --f-primary: #22D3EE;
  --f-primary-hover: #67E8F9;
  --f-primary-active: #0EA5E9;   /* 白字横幅 5.03:1，专供「彩色表面上的白/深文字」 */
  /* 深端：专供「彩色横幅 / Hero 色块上的深色文字」使用（白底文字在其上对比度达标） */
  --f-primary-deep: #0E7490;
  --f-primary-50: rgba(34, 211, 238, .10);
  --f-primary-100: rgba(34, 211, 238, .16);
  --f-primary-200: rgba(34, 211, 238, .24);
  --f-primary-300: rgba(34, 211, 238, .40);
  --f-primary-on: #06121A;

  /* 辅色：冰蓝（次要操作 / 图表第二序列 / 信息态） */
  --f-accent: #60A5FA;
  --f-accent-hover: #7DB3FB;
  --f-accent-active: #3B82F6;
  --f-accent-50: rgba(96, 165, 250, .12);
  --f-accent-200: rgba(96, 165, 250, .22);
  --f-accent-on: #06121A;

  /* 品牌渐变两端 + 高亮亮青 + 薄荷价格（锚定参考图调色板） */
  --f-indigo: #2C64FF;          /* 渐变起点：靛蓝（品牌 / 主按钮 / 分页选中） */
  --f-violet: #8B3BFF;          /* 渐变终点：紫罗兰（实底填充：徽章底 / 图标圆底） */
  /* 紫罗兰派生档：暗底上的**文字**必须用 --f-violet-bright（#8B3BFF 对暗底仅 3.4:1，不达 AA） */
  --f-violet-bright: #B08CFF;   /* 侧栏/导航激活文字与图标（对侧栏底 7.18:1） */
  --f-violet-50: rgba(139, 59, 255, .16);
  --f-violet-100: rgba(139, 59, 255, .24);
  --f-violet-line: rgba(139, 59, 255, .45);
  --f-cyan-bright: #67E8F9;     /* 落在暗底上的亮青强调文字（≥7:1） */
  --f-cyan-hi: #A5F3FC;         /* 链接 hover 更亮一档 */
  --f-mint: #2DD4BF;            /* 价格 / 成功强调（参考图薄荷） */
  --f-mint-deep: #5EEAD4;       /* 暗底上的强调文字 / 余额高亮 */
  --f-mint-soft: rgba(45, 212, 191, .14);
  --f-mint-line: rgba(45, 212, 191, .38);

  /* 点缀色：图表 / 标签扩展序列 */
  --f-cyan: #38BDF8;
  --f-coral: #FF7A59;

  /* 主渐变（按钮 / 高亮 / 品牌 / 分页选中 = 靛蓝→紫罗兰，对齐参考图） */
  --f-grad: linear-gradient(135deg, #2C64FF 0%, #8B3BFF 100%);
  --f-grad-soft: linear-gradient(135deg, rgba(44, 100, 255, .18), rgba(139, 59, 255, .18));

  /* 中性色阶 900 → 50（暗色：显式高对比浅色文字 + 深结构面；
     文字档全部按「暗底 WCAG AA 正文 ≥4.5:1」取值，不再用 <5:1 的灰） */
  --f-ink-900: #F2F6FC;   /* 标题 / 关键数值          ≈ 15:1 */
  --f-ink-800: #E6EDF6;   /* 标题（h1–h6）            ≈ 14:1 */
  --f-ink-700: #D9E4F0;   /* 正文基准                ≈ 12:1 */
  --f-ink-600: #AEBCCE;   /* 标签 / 次要说明          ≈ 8.6:1 */
  --f-ink-500: #93A2B6;   /* 弱化文字                ≈ 6.5:1 */
  --f-ink-400: #7C8BA0;   /* 装饰 / 占位符（已提升到可读） */
  --f-ink-300: #4A5668;
  --f-ink-200: #2A3344;
  --f-ink-100: #1A2233;
  --f-ink-50: #121826;

  /* 背景与面（暗色：深海军蓝黑基底，对齐参考图） */
  --f-bg: #0A0F1C;            /* 页面底色（深海军蓝黑） */
  --f-bg-soft: #0E1526;
  --f-surface: rgba(18, 26, 45, .72);   /* 卡片面（半透明，配合毛玻璃） */
  --f-surface-alt: #121A2D;   /* 表头 / 代码块等次面 */

  /* 语义色（暗底保持高饱和，保证可读；未重写页面状态语义不漂移） */
  --f-success: #34D399;
  --f-success-bg: rgba(52, 211, 153, .14);
  --f-success-ink: #6EE7B7;
  --f-warning: #FBBF24;
  --f-warning-bg: rgba(251, 191, 36, .14);
  --f-warning-ink: #FCD34D;
  --f-danger: #F87171;
  --f-danger-bg: rgba(248, 113, 113, .14);
  --f-danger-ink: #FCA5A5;
  --f-info: #60A5FA;
  --f-info-bg: rgba(96, 165, 250, .14);
  --f-info-ink: #93C5FD;
  --f-neutral: #6B7B91;
  --f-neutral-bg: #1A2233;

  /* 文本（全部显式高对比，解决「看不清」） */
  --f-text: #D9E4F0;     /* 正文                     ≈ 12:1 */
  --f-text-2: #AEBCCE;   /* 次要说明                 ≈ 8.6:1 */
  --f-text-3: #93A2B6;   /* 弱化 / 占位符            ≈ 6.5:1 */
  --f-text-4: #7C8BA0;   /* 最弱一档（仍 ≥5:1）       ≈ 5.4:1 */
  --f-text-inv: #06121A;
  /* 链接色：参考图亮青，暗底对比度 ≥10:1 */
  --f-link: #67E8F9;

  /* 线（对齐参考图蓝灰描边） */
  --f-border: rgba(140, 170, 220, .18);
  --f-border-strong: rgba(140, 170, 220, .30);
  --f-divider: rgba(140, 170, 220, .11);

  /* 毛玻璃 / 微光（新增令牌，仅供 fresh-darkglass.css 使用） */
  --f-glass-bg: rgba(18, 26, 45, .80);
  --f-glass-border: rgba(140, 170, 220, .20);
  --f-glow: 0 10px 34px rgba(3, 6, 14, .55);
  --f-glow-hover: 0 16px 44px rgba(3, 6, 14, .62), 0 0 0 1px rgba(140, 180, 255, .32);
  --f-focus-ring: 0 0 0 3px rgba(34, 211, 238, .26);   /* 青蓝聚焦柔光 */
  --f-divider-grad: linear-gradient(90deg, transparent, rgba(140, 180, 255, .34), transparent);
  --f-price-color: #5EEAD4;   /* 金额 / 余额高亮（薄荷，对齐参考图价格色） */
  --f-price-glow: 0 0 18px rgba(45, 212, 191, .38);

  /* 圆角（保留） */
  --f-radius-xs: 4px;
  --f-radius-sm: 6px;
  --f-radius: 10px;
  --f-radius-md: 12px;
  --f-radius-lg: 16px;
  --f-radius-xl: 24px;
  --f-radius-pill: 999px;

  /* 阴影：暗色，更深更柔 */
  --f-shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
  --f-shadow-sm: 0 2px 8px rgba(0, 0, 0, .55);
  --f-shadow-md: 0 6px 20px rgba(0, 0, 0, .60);
  --f-shadow-lg: 0 16px 40px rgba(0, 0, 0, .68);
  --f-shadow-primary: 0 8px 24px rgba(34, 211, 238, .22);
  --f-shadow-accent: 0 8px 24px rgba(96, 165, 250, .22);
  --f-ring: var(--f-focus-ring);

  /* 间距（4px 基准栅格，保留） */
  --f-space-1: 4px;
  --f-space-2: 8px;
  --f-space-3: 12px;
  --f-space-4: 16px;
  --f-space-5: 20px;
  --f-space-6: 24px;
  --f-space-8: 32px;
  --f-space-10: 40px;
  --f-space-12: 48px;

  /* 字体（保留） */
  --f-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --f-font-num: "Inter", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
  --f-fs-xs: 12px;
  --f-fs-sm: 13px;
  --f-fs-base: 14px;
  --f-fs-md: 16px;
  --f-fs-lg: 18px;
  --f-fs-xl: 20px;
  --f-fs-2xl: 24px;
  --f-lh: 1.6;
  --f-fw-normal: 400;
  --f-fw-medium: 500;
  --f-fw-semibold: 600;
  --f-fw-bold: 700;

  /* 布局尺寸（保留，覆盖 app.min.css 的 250px 硬编码） */
  --f-topbar-h: 64px;
  --f-sidebar-w: 240px;
  --f-sidebar-w-mini: 72px;
  --f-footer-h: 56px;
  --f-content-max: 1560px;

  /* 动效（保留） */
  --f-ease: cubic-bezier(.4, 0, .2, 1);
  --f-dur-fast: .15s;
  --f-dur: .24s;
  --f-dur-slow: .36s;

  /* 层级（保留） */
  --f-z-mask: 1040;
  --f-z-drawer: 1045;
  --f-z-preloader: 9998;
}

/* ---------- 1. 全局 reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--f-bg);
  color: var(--f-text);
  font-family: var(--f-font-sans);
  font-size: var(--f-fs-base);
  line-height: var(--f-lh);
  font-weight: var(--f-fw-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 覆盖 Skote 底座的 Arial !important */
body {
  font-family: var(--f-font-sans) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--f-ink-800);
  font-weight: var(--f-fw-semibold);
  line-height: 1.35;
  margin: 0;
}

p {
  margin: 0 0 var(--f-space-3);
}

/* 链接：统一色与过渡，去掉下划线突兀感 */
a {
  color: var(--f-link);
  text-decoration: none;
  transition: color var(--f-dur-fast) var(--f-ease);
}

a:hover,
a:focus {
  /* hover 提亮到亮青（暗底 ≥10:1）；深端 --f-primary-deep 专供彩色表面上的文字 */
  color: var(--f-cyan-hi);
  text-decoration: none;
}

img {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--f-divider);
  opacity: 1;
}

/* 数字（金额 / ID / 时间）等宽对齐，提升商务感 */
.f-num,
table td .f-num {
  font-family: var(--f-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 选中态 */
::selection {
  background: var(--f-primary-200);
  color: var(--f-ink-900);
}

/* 键盘可达性：聚焦可见环 */
:focus-visible {
  outline: 2px solid var(--f-primary);
  outline-offset: 2px;
}

/* ---------- 2. 滚动条（细腻化，仅 WebKit / Firefox） ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--f-ink-300);
  border-radius: var(--f-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--f-ink-400);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--f-ink-300) transparent;
}

/* ---------- 3. 通用工具类（.f-* 新命名空间，不污染旧类） ---------- */
.f-text-1 { color: var(--f-text) !important; }
.f-text-2 { color: var(--f-text-2) !important; }
.f-text-3 { color: var(--f-text-3) !important; }
.f-text-4 { color: var(--f-text-4) !important; }
.f-text-primary { color: var(--f-primary-active) !important; }
.f-text-accent { color: var(--f-accent-active) !important; }
.f-text-danger { color: var(--f-danger-ink) !important; }
.f-text-warning { color: var(--f-warning-ink) !important; }
.f-text-success { color: var(--f-success-ink) !important; }

.f-fs-xs { font-size: var(--f-fs-xs) !important; }
.f-fs-sm { font-size: var(--f-fs-sm) !important; }
.f-fs-md { font-size: var(--f-fs-md) !important; }
.f-fs-lg { font-size: var(--f-fs-lg) !important; }
.f-fs-xl { font-size: var(--f-fs-xl) !important; }
.f-fs-2xl { font-size: var(--f-fs-2xl) !important; }

.f-fw-medium { font-weight: var(--f-fw-medium) !important; }
.f-fw-semibold { font-weight: var(--f-fw-semibold) !important; }
.f-fw-bold { font-weight: var(--f-fw-bold) !important; }

.f-mono { font-family: var(--f-font-num) !important; }
.f-nowrap { white-space: nowrap; }
.f-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.f-d-flex { display: flex; }
.f-items-center { align-items: center; }
.f-justify-between { justify-content: space-between; }
.f-gap-1 { gap: var(--f-space-1); }
.f-gap-2 { gap: var(--f-space-2); }
.f-gap-3 { gap: var(--f-space-3); }
.f-gap-4 { gap: var(--f-space-4); }
.f-gap-6 { gap: var(--f-space-6); }
.f-flex-1 { flex: 1 1 auto; min-width: 0; }

.f-mt-0 { margin-top: 0 !important; }
.f-mb-0 { margin-bottom: 0 !important; }
.f-mt-2 { margin-top: var(--f-space-2) !important; }
.f-mb-2 { margin-bottom: var(--f-space-2) !important; }
.f-mt-4 { margin-top: var(--f-space-4) !important; }
.f-mb-4 { margin-bottom: var(--f-space-4) !important; }
.f-mt-6 { margin-top: var(--f-space-6) !important; }
.f-mb-6 { margin-bottom: var(--f-space-6) !important; }

.f-hidden { display: none !important; }
.f-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;
}

/* ---------- 4. 加载动画（#fPreloader） ----------
   注意：不用 #preloader / #status —— app.js 已在 window.load 里 fadeOut 它们 */
.f-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--f-z-preloader);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--f-bg);
  opacity: 1;
  transition: opacity var(--f-dur-slow) var(--f-ease);
}

.f-preloader.is-hide {
  opacity: 0;
  pointer-events: none;
}

.f-preloader__ring {
  width: 34px;
  height: 34px;
  border: 3px solid var(--f-primary-100);
  border-top-color: var(--f-primary);
  border-radius: 50%;
  animation: f-spin .7s linear infinite;
}

@keyframes f-spin {
  to { transform: rotate(360deg); }
}

/* 骨架屏：列表/表格加载占位，带流光 */
.f-skeleton {
  padding: var(--f-space-2) 0;
}

.f-skeleton__row {
  display: flex;
  gap: var(--f-space-4);
  padding: var(--f-space-3) var(--f-space-4);
  border-bottom: 1px solid var(--f-divider);
}

.f-skeleton__bar {
  flex: 1;
  height: 14px;
  border-radius: var(--f-radius-sm);
  background: linear-gradient(90deg,
      var(--f-ink-100) 25%,
      var(--f-ink-50) 37%,
      var(--f-ink-100) 63%);
  background-size: 400% 100%;
  animation: f-shimmer 1.3s ease-in-out infinite;
}

@keyframes f-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* 尊重系统「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}