/* ============================================================
   TOKENS 2026 — 全站设计令牌（金 / 绿 / 红 三色规范）
   收敛自 topic-unified.css · app-shell.css · design-2026.css
   ============================================================ */

:root {
  /* ── Gold scale (primary) ── */
  --gold-50:  #fff9eb;
  --gold-100: #fef3c7;
  --gold-200: #fde68a;
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --gold-700: #b45309;
  --gold-800: #92400e;
  --gold-900: #78350f;
  --gold: var(--gold-500);

  /* ── Semantic status (green / red only) ── */
  --green: #10b981;
  --green2: #34d399;
  --red: #ef4444;
  --red2: #f87171;

  /* ── Surfaces ── */
  --surface-0: #050508;
  --surface-1: #0a0b12;
  --surface-2: #11131e;
  --surface-3: #181b2a;
  --surface-4: #1f2336;

  /* ── Borders ── */
  --border-subtle: rgba(245, 158, 11, 0.08);
  --border-soft: rgba(245, 158, 11, 0.15);
  --border-glow: rgba(245, 158, 11, 0.3);

  /* ── Typography ── */
  --text-primary: #f1f1f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ── Shell layout ── */
  --sidebar-w: 272px;
  --sidebar-w-collapsed: 80px;
  --shell-accent: var(--gold-500);
  --shell-accent-dim: var(--gold-700);
  --shell-glass: rgba(17, 19, 30, 0.72);
  --shell-glass-2: rgba(24, 27, 42, 0.6);
  --shell-border: rgba(245, 158, 11, 0.14);
  --shell-hover: rgba(245, 158, 11, 0.1);
  --shell-active: rgba(245, 158, 11, 0.16);
  --shell-radius: var(--radius-md);
  --shell-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Legacy aliases — map old cyan/blue names to gold (no cyan primary hue) */
  --shell-cyan: var(--gold-400);
  --shell-cyan-2: var(--gold-600);
  --shell-gold: var(--gold-500);
  --shell-gold-2: var(--gold-700);

  /* ── Fluid typography ── */
  --fluid-xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem);
  --fluid-sm: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
  --fluid-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --fluid-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --fluid-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fluid-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --fluid-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);

  /* ── Shadows & motion ── */
  --app-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --cz-scan-duration: 18s;
}

/* ── Light theme ── */
body.light-theme,
html.light-theme {
  --surface-0: #fafaf7;
  --surface-1: #f5f4f0;
  --surface-2: #fefefe;
  --surface-3: #f0efe9;
  --surface-4: #e8e6dd;
  --text-primary: #1a1a1e;
  --text-secondary: #6b6b75;
  --text-muted: #9a9aa5;
  /* Light-theme gold text: WCAG AA on #fefefe (normal ≥4.5:1, large ≥3:1) */
  --text-gold: #92400e;
  --text-gold-lg: #b45309;
  --border-subtle: rgba(180, 83, 9, 0.06);
  --border-soft: rgba(180, 83, 9, 0.12);
  --border-glow: rgba(180, 83, 9, 0.25);
  --shell-glass: rgba(255, 255, 255, 0.82);
  --shell-border: rgba(180, 83, 9, 0.12);
  --app-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ── Base resets (shared) ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--surface-0);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  font-size: var(--fluid-base);
  letter-spacing: -0.01em;
}

/* Ambient background (subtle gold grid) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(245, 158, 11, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 90%, rgba(245, 158, 11, 0.04) 0%, transparent 60%);
}

/* ── Focus ring (global) ── */
:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}