@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&display=swap');

:root {
  --bg: #16121f;
  --bg2: #221b30;
  --card: #2b2340;
  --ink: #fbf7ef;
  --muted: #b3a9c6;
  --accent: #ffcc3d;      /* yellow */
  --accent2: #ff6b5b;     /* coral */
  --good: #4fd18b;
  --bad: #ff6b5b;
  --line: rgba(255,255,255,.12);
  --font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 800px at 80% -10%, #3a2453 0%, transparent 60%),
              radial-gradient(900px 700px at -10% 110%, #3b1f2e 0%, transparent 60%), var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }