/* The app's design tokens (lib/ui/mm_theme.dart): near-black board, off-white
   ink, one pink accent, hairline white borders. */
@font-face {
  font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap;
  src: url("/fonts/SpaceGrotesk.ttf") format("truetype");
}
@font-face {
  font-family: "Chakra Petch"; font-weight: 700; font-display: swap;
  src: url("/fonts/ChakraPetch-Bold.ttf") format("truetype");
}
:root {
  --bg: #0b0c10; --raised: #101218; --surface: #14161c;
  --ink: #e9eaf0; --ink-60: rgba(233, 234, 240, .6); --ink-30: rgba(233, 234, 240, .3);
  --pink: #f2789f; --blue: #7aa2ff;
  --fill: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .10);
  --kick: #5b8cff; --snare: #f26b6b; --hat: #4bc78c; --amber: #d6a63e;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: "Space Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }
.label {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-60);
}
.pill {
  display: inline-block; padding: 10px 20px; border-radius: 12px;
  background: var(--fill); border: 1px solid var(--border); color: var(--ink);
  font-size: .9rem; font-weight: 600;
}
.pill.cta {
  background: var(--pink); border-color: var(--pink); color: var(--bg);
  text-decoration: none; font-weight: 700;
}