@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

:root {
  --font-body: "DM Sans", sans-serif;
  --font-title: "Roboto", "DM Sans", sans-serif;

  --bg-1: #0c0c0c;
  --bg-2: #101010;
  --bg-3: #141414;
  --card: #151515;
  --card-2: #101010;
  --text: #f4f5f7;
  --muted: #9aa3b2;
  --accent: #b1f82a;
  --accent-2: #1e04fb;
  --accent-3: #5b59ff;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --cta-text: #0a0a0a;
  --cta-secondary-text: #f4f5f7;
  --topbar-bg: rgba(10, 12, 18, 0.7);
  --topbar-blur: 16px;
  --bg-spot-1: rgba(30, 4, 251, 0.25);
  --bg-spot-2: rgba(177, 248, 42, 0.18);

  --h-bg: var(--bg-1);
  --h-bg-soft: var(--bg-2);
  --h-bg-elevated: var(--card);
  --h-ink: var(--text);
  --h-muted: var(--muted);
  --h-accent: var(--accent);
  --h-accent-2: var(--accent-2);
  --h-accent-3: var(--accent-3);
  --h-line: rgba(255, 255, 255, 0.08);
  --h-shadow: var(--shadow);
  --h-radius: 18px;
}

html,
body {
  font-family: var(--font-body);
  color: var(--text);
}

h1,
h2,
h3,
h4,
.brand,
.logo {
  font-family: var(--font-title);
  letter-spacing: -0.01em;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-2);
}