/* ============================================================
   ATX Shield 设计系统基座 · tokens.css  (v2 · de-AI 重制)
   方法：ui-ux-pro-max skill 检索定案
   · 字体：JetBrains Mono（标题/标签/数字） + IBM Plex Sans（正文）— 自托管 OFL
   · 表面：平面精密（无毛玻璃/无渐变/无发光），发丝线边框，深海军黑
   · 强调：单一终端绿 #22C55E，只用于动作与正向状态
   ============================================================ */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --atx-bg: #020617;
  --atx-bg-elev: #0E1223;
  --atx-surface: #0E1223;
  --atx-surface-2: #111827;
  --atx-border: #334155;
  --atx-border-faint: #1E293B;

  --atx-fg: #F8FAFC;
  --atx-fg-muted: #94A3B8;
  --atx-faint: #64748B;

  --atx-accent: #22C55E;
  --atx-on-accent: #020617;
  --atx-accent-dim: #16A34A;
  --atx-accent-soft: rgba(34, 197, 94, 0.12);

  --atx-ok: #22C55E;
  --atx-warn: #EAB308;
  --atx-danger: #EF4444;

  --atx-font: 'IBM Plex Sans', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --atx-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --atx-fs-xs: 0.75rem;
  --atx-fs-sm: 0.875rem;
  --atx-fs-md: 1rem;
  --atx-fs-lg: 1.375rem;
  --atx-fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --atx-fs-hero: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);

  --atx-sp-1: 0.5rem;
  --atx-sp-2: 1rem;
  --atx-sp-3: 1.5rem;
  --atx-sp-4: 2rem;
  --atx-sp-5: 3rem;
  --atx-sp-6: 4.5rem;

  --atx-r-xs: 8px;      /* 小型内联元素 */
  --atx-r-sm: 10px;     /* 按钮 / 输入框 / 分段控件（skill: Soft UI Evolution 8-12px） */
  --atx-r: 14px;        /* 卡片 / 面板默认 */
  --atx-r-lg: 20px;     /* 大卡（余额卡 / 结果卡 / 定价卡） */
  --atx-r-pill: 999px;  /* 徽章 / chip / 圆点 */
  --atx-shadow: none;
  --atx-shadow-soft: none;

  --atx-t: 150ms ease;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --atx-bg: #FFFFFF;
    --atx-bg-elev: #F8FAFC;
    --atx-surface: #FFFFFF;
    --atx-surface-2: #F1F5F9;
    --atx-border: #CBD5E1;
    --atx-border-faint: #E2E8F0;
    --atx-fg: #0F172A;
    --atx-fg-muted: #475569;
    --atx-faint: #94A3B8;
    --atx-accent: #16A34A;
    --atx-on-accent: #FFFFFF;
    --atx-accent-dim: #15803D;
    --atx-accent-soft: rgba(22, 163, 74, 0.1);
  }
}

/* ============ 基础 ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--atx-font);
  font-size: var(--atx-fs-md);
  line-height: 1.65;
  color: var(--atx-fg);
  background: var(--atx-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--atx-mono);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--atx-sp-2);
}
h1 { font-size: var(--atx-fs-hero); }
h2 { font-size: var(--atx-fs-xl); }
p { margin: 0 0 var(--atx-sp-2); }
a { color: var(--atx-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, .mono { font-family: var(--atx-mono); font-size: 0.9em; }

::selection { background: var(--atx-accent); color: var(--atx-on-accent); }
:focus-visible { outline: 2px solid var(--atx-accent); outline-offset: 2px; }

/* 等宽小标签（区域编号/元数据）——本设计的签名元素 */
.label {
  font-family: var(--atx-mono);
  font-size: var(--atx-fs-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--atx-faint);
}

.text-gradient { color: var(--atx-accent); } /* 兼容旧钩子：不再做渐变字 */

/* ============ 组件 ============ */
.card {
  background: var(--atx-surface);
  border: 1px solid var(--atx-border-faint);
  border-radius: var(--atx-r);
  padding: var(--atx-sp-3);
}
.card--featured { border-color: var(--atx-accent); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  border: 1px solid var(--atx-border);
  border-radius: var(--atx-r-sm);
  background: transparent;
  color: var(--atx-fg);
  font-family: var(--atx-mono);
  font-size: var(--atx-fs-sm);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--atx-t), color var(--atx-t), background var(--atx-t);
}
.btn:hover { border-color: var(--atx-accent); color: var(--atx-accent); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  background: var(--atx-accent);
  border-color: var(--atx-accent);
  color: var(--atx-on-accent);
}
.btn--primary:hover { background: var(--atx-accent-dim); border-color: var(--atx-accent-dim); color: var(--atx-on-accent); }
.btn--ghost { border-color: transparent; }
.btn--sm { padding: 0.4em 0.8em; font-size: var(--atx-fs-xs); }

.input {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid var(--atx-border);
  border-radius: var(--atx-r-sm);
  background: var(--atx-bg);
  color: var(--atx-fg);
  font-family: var(--atx-mono);
  font-size: var(--atx-fs-sm);
  transition: border-color var(--atx-t);
}
.input::placeholder { color: var(--atx-faint); }
.input:focus { outline: none; border-color: var(--atx-accent); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.7em;
  border-radius: var(--atx-r-pill);
  font-family: var(--atx-mono);
  font-size: var(--atx-fs-xs);
  background: var(--atx-accent-soft);
  color: var(--atx-accent);
  border: 1px solid var(--atx-border-faint);
}
.badge--ok { color: var(--atx-ok); background: transparent; border: 1px solid var(--atx-ok); }
.badge--warn { color: var(--atx-warn); background: transparent; border: 1px solid var(--atx-warn); }
.badge--danger { color: var(--atx-danger); background: transparent; border: 1px solid var(--atx-danger); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.9em;
  border-radius: var(--atx-r-pill);
  border: 1px solid var(--atx-border-faint);
  background: var(--atx-bg-elev);
  font-family: var(--atx-mono);
  font-size: var(--atx-fs-xs);
}

.container { max-width: 1080px; margin-inline: auto; padding-inline: var(--atx-sp-2); }
.row { display: flex; gap: var(--atx-sp-2); align-items: center; flex-wrap: wrap; }
.muted { color: var(--atx-fg-muted); }
.small { font-size: var(--atx-fs-sm); }

.lang-select { width: auto; padding-block: 0.35em; font-size: var(--atx-fs-xs); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}