/* ============================================================
   AYCHO module: tokens  |  owner: A(main)  |  contract: v1
   设计系统：所有模块必须使用本文件变量（务必带 fallback）
   ============================================================ */
:root {
  color-scheme: dark;

  /* ---------- 背景与层级表面 ---------- */
  --ax-bg: #06070b;
  --ax-bg-2: #0a0c13;
  --ax-bg-3: #10131c;
  --ax-surface: rgba(255, 255, 255, 0.045);
  --ax-surface-2: rgba(255, 255, 255, 0.075);
  --ax-surface-3: rgba(255, 255, 255, 0.11);
  --ax-surface-solid: #12151f;

  /* 半透明描边优先，禁止纯色实心边框（1px 实线只用于极弱分割） */
  --ax-border: rgba(255, 255, 255, 0.10);
  --ax-border-soft: rgba(255, 255, 255, 0.06);
  --ax-border-strong: rgba(255, 255, 255, 0.16);
  --ax-hairline: rgba(255, 255, 255, 0.055);

  /* ---------- 文本 ---------- */
  --ax-text: #f2f5fa;
  --ax-text-2: #a7b0c0;
  --ax-text-3: #6d7688;
  --ax-text-4: #59606f;
  --ax-text-disabled: #4a5262;

  /* ---------- 主题色 ---------- */
  --ax-accent: #7c9cff;
  --ax-accent-2: #a78bfa;
  --ax-accent-3: #22d3ee;
  --ax-accent-soft: rgba(124, 156, 255, 0.14);
  --ax-accent-text: #cddaff;

  --ax-ok: #34d399;
  --ax-warn: #fbbf24;
  --ax-danger: #f87171;
  --ax-danger-soft: rgba(248, 113, 113, 0.14);

  /* 极光色板（动态背景用） */
  --ax-aurora-1: #5b8cff;
  --ax-aurora-2: #a855f7;
  --ax-aurora-3: #22d3ee;
  --ax-aurora-4: #f472b6;
  --ax-aurora-5: #34d399;

  /* ---------- 阴影（用阴影而非实线表达轮廓） ---------- */
  --ax-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --ax-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --ax-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --ax-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.48), 0 1px 0 rgba(255, 255, 255, 0.07) inset;
  --ax-shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.55);
  --ax-glow-accent: 0 0 0 1px rgba(124, 156, 255, 0.35), 0 8px 28px rgba(124, 156, 255, 0.22);

  /* ---------- 圆角 ---------- */
  --ax-r-xs: 6px;
  --ax-r-sm: 10px;
  --ax-r-md: 14px;
  --ax-r-lg: 18px;
  --ax-r-xl: 24px;
  --ax-r-2xl: 32px;
  --ax-r-pill: 999px;

  /* ---------- 间距 ---------- */
  --ax-s-1: 4px;
  --ax-s-2: 8px;
  --ax-s-3: 12px;
  --ax-s-4: 16px;
  --ax-s-5: 20px;
  --ax-s-6: 24px;
  --ax-s-8: 32px;
  --ax-s-10: 40px;

  /* ---------- 动效（进入用 ease-out，退出用 ease-in） ---------- */
  --ax-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ax-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ax-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ax-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ax-dur-1: 120ms;
  --ax-dur-2: 200ms;
  --ax-dur-3: 320ms;
  --ax-dur-4: 520ms;

  /* ---------- 布局 ---------- */
  --ax-left-w: 272px;
  --ax-left-w-collapsed: 60px;
  --ax-right-w: 396px;
  --ax-right-w-collapsed: 0px;
  --ax-topbar-h: 52px;
  --ax-composer-max: 828px;

  /* ---------- 字体 ---------- */
  --ax-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --ax-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* ---------- 层级 ---------- */
  --ax-z-bg: 0;
  --ax-z-bg-fx: 1;
  --ax-z-content: 10;
  --ax-z-side: 40;
  --ax-z-drawer: 55;
  --ax-z-overlay: 60;
  --ax-z-modal: 80;
  --ax-z-toast: 100;
}

/* ============================================================
   通用基元（所有模块可用，类名前缀 ax-）
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ax-bg, #06070b);
  color: var(--ax-text, #f2f5fa);
  font-family: var(--ax-font, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--ax-accent, #7c9cff); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ax-accent, #7c9cff);
  outline-offset: 2px;
  border-radius: var(--ax-r-xs, 6px);
}

/* 细滚动条 */
.ax-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.ax-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ax-scroll::-webkit-scrollbar-track { background: transparent; }
.ax-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.13);
  border-radius: var(--ax-r-pill, 999px);
  border: 2px solid transparent;
  background-clip: content-box;
}
.ax-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); background-clip: content-box; }

/* 玻璃面板 */
.ax-glass {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border: 1px solid var(--ax-border-soft, rgba(255,255,255,.06));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--ax-shadow-md);
}

/* 幽灵按钮 */
.ax-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--ax-r-sm, 10px);
  color: var(--ax-text-2, #a7b0c0); background: transparent;
  transition: background var(--ax-dur-1) var(--ax-ease-out),
              color var(--ax-dur-1) var(--ax-ease-out),
              transform var(--ax-dur-1) var(--ax-ease-out);
}
.ax-btn:hover { background: var(--ax-surface, rgba(255,255,255,.045)); color: var(--ax-text, #f2f5fa); }
.ax-btn:active { transform: scale(0.97); }
.ax-btn--solid { background: var(--ax-surface-2, rgba(255,255,255,.075)); color: var(--ax-text, #f2f5fa); box-shadow: var(--ax-shadow-sm); }
.ax-btn--primary { background: linear-gradient(180deg, #8facff, #6f8ff5); color: #080a12; font-weight: 600; box-shadow: var(--ax-shadow-sm); }
.ax-btn--danger { color: var(--ax-danger, #f87171); }
.ax-btn--danger:hover { background: var(--ax-danger-soft, rgba(248,113,113,.14)); }

/* 输入 */
.ax-input {
  width: 100%; height: 38px; padding: 0 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ax-border-soft, rgba(255,255,255,.06));
  border-radius: var(--ax-r-sm, 10px); color: var(--ax-text, #f2f5fa);
  transition: border-color var(--ax-dur-2) var(--ax-ease-out), box-shadow var(--ax-dur-2) var(--ax-ease-out),
              background var(--ax-dur-2) var(--ax-ease-out);
}
.ax-input::placeholder { color: var(--ax-text-3, #6d7688); }
.ax-input:focus {
  outline: none; background: rgba(255,255,255,.06);
  border-color: rgba(124,156,255,.45);
  box-shadow: 0 0 0 3px rgba(124,156,255,.14);
}

/* 徽标 / 标签 */
.ax-tag {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  font-size: 11px; color: var(--ax-text-2, #a7b0c0);
  background: var(--ax-surface, rgba(255,255,255,.045));
  border-radius: var(--ax-r-pill, 999px);
}

/* 空状态 */
.ax-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 32px 20px; color: var(--ax-text-3, #6d7688);
  font-size: 12.5px; text-align: center;
}
.ax-empty svg { opacity: .5; }

/* ============================================================
   共享关键帧
   ============================================================ */
@keyframes ax-spin { to { transform: rotate(360deg); } }
@keyframes ax-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ax-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ax-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ax-breathe { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes ax-shimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
@keyframes ax-aurora-drift {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1.05) rotate(0deg); }
  33%  { transform: translate3d(5%, 3%, 0) scale(1.15) rotate(12deg); }
  66%  { transform: translate3d(-3%, 6%, 0) scale(1.1) rotate(-8deg); }
  100% { transform: translate3d(-6%, -4%, 0) scale(1.05) rotate(0deg); }
}
@keyframes ax-orbit {
  from { transform: rotate(0deg) translateX(11px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(11px) rotate(-360deg); }
}

/* 骨架屏 */
.ax-skel {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.05) 63%);
  background-size: 200% 100%;
  animation: ax-shimmer 1.4s infinite linear;
  border-radius: var(--ax-r-xs, 6px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}