/* ============================================================
   NeverMind Design System — Core tokens
   我的世界 NeverMind 服务器 · 官方视觉规范
   ============================================================ */

/* ---- Fonts -------------------------------------------------- */
/* Substitutions flagged to user:
   - Display / UI latin: Space Grotesk (geometric, technical feel)
   - Body latin: Inter
   - Chinese: Noto Sans SC (official, crisp, works for body + UI)
   - Serif display: Noto Serif SC (used very sparingly for editorial moments)
   - Mono / tabular: JetBrains Mono (leaderboards, stats, IDs)
   All via Google Fonts — self-host in fonts/ for production if needed.
*/

:root {
  /* ---- Brand color — Midnight Blue scale ------------------- */
  --nm-midnight-950: #05080F;  /* page background, void */
  --nm-midnight-900: #0A1020;  /* primary surface */
  --nm-midnight-800: #111A33;  /* elevated surface */
  --nm-midnight-700: #1A2649;  /* card, panel */
  --nm-midnight-600: #27386B;  /* hover surface */
  --nm-midnight-500: #3A508F;  /* borders on dark */
  --nm-midnight-400: #5872B8;  /* icon, de-emphasized */
  --nm-midnight-300: #8DA3D4;  /* body text on dark (secondary) */
  --nm-midnight-200: #B9C8E6;  /* body text on dark */
  --nm-midnight-100: #DDE5F5;  /* headline on dark */
  --nm-midnight-050: #F2F5FB;

  /* ---- Accent — cool electric blue (restrained) ------------ */
  --nm-accent-900: #0B2A6B;
  --nm-accent-700: #1E4BB8;
  --nm-accent-500: #3B7AF5;   /* primary CTA, focus ring */
  --nm-accent-400: #6096FF;
  --nm-accent-300: #8FB5FF;
  --nm-accent-100: #DCE7FF;

  /* ---- Neutrals (for light sections / docs) ---------------- */
  --nm-neutral-950: #0D1117;
  --nm-neutral-900: #161B22;
  --nm-neutral-700: #30363D;
  --nm-neutral-500: #6E7681;
  --nm-neutral-300: #B1BAC4;
  --nm-neutral-100: #E6EAF0;
  --nm-neutral-050: #F6F8FA;
  --nm-neutral-000: #FFFFFF;

  /* ---- Semantic --------------------------------------------- */
  --nm-success: #22C55E;
  --nm-success-fg: #86EFAC;
  --nm-warning: #F59E0B;
  --nm-warning-fg: #FCD34D;
  --nm-danger:  #EF4444;
  --nm-danger-fg:  #FCA5A5;
  --nm-info:    var(--nm-accent-500);

  /* Rank / tier accents (leaderboard, PvP stats) */
  --nm-rank-gold:   #E9B949;
  --nm-rank-silver: #C9CFD8;
  --nm-rank-bronze: #B07947;

  /* ---- Foreground tokens (on dark, which is default) ------- */
  --nm-fg-1: var(--nm-midnight-100);   /* strongest text, headlines */
  --nm-fg-2: var(--nm-midnight-200);   /* body */
  --nm-fg-3: var(--nm-midnight-300);   /* secondary / captions */
  --nm-fg-4: var(--nm-midnight-400);   /* muted / icons */
  --nm-fg-inverse: var(--nm-midnight-950);

  /* ---- Background tokens ----------------------------------- */
  --nm-bg-0: var(--nm-midnight-950);   /* page */
  --nm-bg-1: var(--nm-midnight-900);   /* primary surface */
  --nm-bg-2: var(--nm-midnight-800);   /* elevated */
  --nm-bg-3: var(--nm-midnight-700);   /* card */
  --nm-bg-hover: var(--nm-midnight-600);

  /* ---- Borders / lines ------------------------------------- */
  --nm-border-subtle: rgba(141, 163, 212, 0.10);
  --nm-border-default: rgba(141, 163, 212, 0.18);
  --nm-border-strong: rgba(141, 163, 212, 0.32);
  --nm-border-focus: var(--nm-accent-500);

  /* ---- Type families --------------------------------------- */
  --nm-font-display:  'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
  --nm-font-body:     'Inter', 'Noto Sans SC', system-ui, sans-serif;
  --nm-font-serif:    'Noto Serif SC', 'Source Serif Pro', Georgia, serif;
  --nm-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --nm-font-wordmark: 'IM Fell English SC', 'Noto Serif SC', Georgia, serif;  /* brand wordmark ONLY — "NEVERMIND" lockup */

  /* ---- Type scale (pixels; 1.250 minor third, tightened) --- */
  --nm-text-xs:   12px;
  --nm-text-sm:   13px;
  --nm-text-base: 15px;
  --nm-text-md:   17px;
  --nm-text-lg:   20px;
  --nm-text-xl:   24px;
  --nm-text-2xl:  30px;
  --nm-text-3xl:  40px;
  --nm-text-4xl:  56px;
  --nm-text-5xl:  80px;
  --nm-text-6xl:  120px;  /* hero-only display */

  /* Line heights */
  --nm-leading-tight: 1.08;
  --nm-leading-snug:  1.22;
  --nm-leading-normal: 1.5;
  --nm-leading-relaxed: 1.7;

  /* Letter spacing */
  --nm-tracking-tight: -0.02em;
  --nm-tracking-normal: 0;
  --nm-tracking-wide:   0.04em;
  --nm-tracking-mega:   0.14em;  /* eyebrow labels */

  /* ---- Spacing (4px grid) ---------------------------------- */
  --nm-space-1:  4px;
  --nm-space-2:  8px;
  --nm-space-3:  12px;
  --nm-space-4:  16px;
  --nm-space-5:  20px;
  --nm-space-6:  24px;
  --nm-space-8:  32px;
  --nm-space-10: 40px;
  --nm-space-12: 48px;
  --nm-space-16: 64px;
  --nm-space-20: 80px;
  --nm-space-24: 96px;
  --nm-space-32: 128px;

  /* ---- Radii ----------------------------------------------- */
  --nm-radius-xs: 2px;   /* tags, pixel-tinged details */
  --nm-radius-sm: 4px;   /* inputs, small chips */
  --nm-radius-md: 6px;   /* buttons, default */
  --nm-radius-lg: 10px;  /* cards */
  --nm-radius-xl: 14px;  /* feature cards */
  --nm-radius-pill: 999px;

  /* ---- Shadows / elevation (cool, blue-tinted) ------------ */
  --nm-shadow-sm: 0 1px 2px rgba(5, 8, 15, 0.4);
  --nm-shadow-md: 0 4px 16px rgba(5, 8, 15, 0.5), 0 1px 2px rgba(5, 8, 15, 0.6);
  --nm-shadow-lg: 0 12px 40px rgba(5, 8, 15, 0.6), 0 2px 6px rgba(5, 8, 15, 0.5);
  --nm-shadow-glow: 0 0 0 1px rgba(59, 122, 245, 0.3), 0 8px 32px rgba(59, 122, 245, 0.25);
  --nm-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Motion ---------------------------------------------- */
  --nm-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nm-dur-1: 120ms;   /* tap / press */
  --nm-dur-2: 200ms;   /* hover */
  --nm-dur-3: 320ms;   /* card reveal */
  --nm-dur-4: 500ms;   /* section enter */

  /* ---- Layout ---------------------------------------------- */
  --nm-container: 1200px;
  --nm-container-wide: 1360px;
  --nm-gutter: 24px;
}

/* ===== Semantic element styles (opt-in via .nm scope) ======= */
.nm {
  background: var(--nm-bg-0);
  color: var(--nm-fg-2);
  font-family: var(--nm-font-body);
  font-size: var(--nm-text-base);
  line-height: var(--nm-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nm h1, .nm .h1 {
  font-family: var(--nm-font-display);
  font-size: var(--nm-text-4xl);
  font-weight: 700;
  line-height: var(--nm-leading-tight);
  letter-spacing: var(--nm-tracking-tight);
  color: var(--nm-fg-1);
  margin: 0;
}
.nm h2, .nm .h2 {
  font-family: var(--nm-font-display);
  font-size: var(--nm-text-3xl);
  font-weight: 700;
  line-height: var(--nm-leading-tight);
  letter-spacing: var(--nm-tracking-tight);
  color: var(--nm-fg-1);
  margin: 0;
}
.nm h3, .nm .h3 {
  font-family: var(--nm-font-display);
  font-size: var(--nm-text-2xl);
  font-weight: 600;
  line-height: var(--nm-leading-snug);
  color: var(--nm-fg-1);
  margin: 0;
}
.nm h4, .nm .h4 {
  font-family: var(--nm-font-display);
  font-size: var(--nm-text-xl);
  font-weight: 600;
  line-height: var(--nm-leading-snug);
  color: var(--nm-fg-1);
  margin: 0;
}
.nm h5, .nm .h5 {
  font-family: var(--nm-font-display);
  font-size: var(--nm-text-lg);
  font-weight: 600;
  line-height: var(--nm-leading-snug);
  color: var(--nm-fg-1);
  margin: 0;
}
.nm p, .nm .body {
  font-size: var(--nm-text-base);
  line-height: var(--nm-leading-relaxed);
  color: var(--nm-fg-2);
  margin: 0;
}
.nm .body-lg {
  font-size: var(--nm-text-md);
  line-height: var(--nm-leading-relaxed);
  color: var(--nm-fg-2);
}
.nm .caption {
  font-size: var(--nm-text-sm);
  color: var(--nm-fg-3);
  line-height: var(--nm-leading-normal);
}
.nm .eyebrow {
  font-family: var(--nm-font-display);
  font-size: var(--nm-text-xs);
  font-weight: 600;
  letter-spacing: var(--nm-tracking-mega);
  text-transform: uppercase;
  color: var(--nm-accent-400);
}
.nm .mono, .nm code {
  font-family: var(--nm-font-mono);
  font-size: 0.92em;
  color: var(--nm-fg-2);
}
.nm .display {
  font-family: var(--nm-font-display);
  font-size: var(--nm-text-5xl);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--nm-fg-1);
}
.nm .display-xl {
  font-family: var(--nm-font-display);
  font-size: var(--nm-text-6xl);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--nm-fg-1);
}
.nm .numeric {
  font-family: var(--nm-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* link */
.nm a { color: var(--nm-accent-400); text-decoration: none; transition: color var(--nm-dur-2) var(--nm-ease-out); }
.nm a:hover { color: var(--nm-accent-300); }

/* selection */
.nm ::selection { background: var(--nm-accent-500); color: #fff; }