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

:root {
  --bg: #030712;
  --panel: #0b1220;
  --panel-2: #0f1b2d;
  --border: rgba(148, 163, 184, 0.12);
  --text: #e5edf7;
  --text-dim: #93a4bd;
  --accent: #38bdf8;
  --accent-dim: rgba(56, 189, 248, 0.16);
  --bubble-me: #14314a;
  --bubble-them: #131c2c;
  --danger: #f87171;
  --radius: 14px;
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

h1, h2, h3, .brand { font-family: var(--font-head); }

button { font-family: var(--font-body); cursor: pointer; }

a { color: var(--accent); text-decoration: none; }

.hidden { display: none !important; }