/* ─────────────────────────────────────────────
   BASE — Variables · Reset · Typography
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@300;400;500;600;700;900&display=swap');

:root {
  /* Brand accent palette */
  --a1: #f59e0b;
  --a2: #fbbf24;
  --a3: #7c3aed;

  /* Surface / background */
  --bg: #0a0a0f;

  /* Text scale */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-dim:       #475569;
  --text-faint:     #334155;

  /* Font families */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Border radii */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  14px;
  --radius-pill: 999px;
}

/* ── Reset ─────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background: var(--bg);
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Utility: mono text ─────────────────────── */
.mono {
  font-family: var(--font-mono);
}