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

:root {
  --bg-deep: #050508;
  --bg-main: #0a0a10;
  --bg-card: rgba(18, 18, 28, 0.85);
  --bg-card-hover: rgba(28, 28, 42, 0.95);
  --border: rgba(99, 102, 241, 0.35);
  --border-glow: rgba(34, 211, 238, 0.5);
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --accent-cyan: #22d3ee;
  --accent-blue: #6366f1;
  --accent-magenta: #e879f9;
  --accent-green: #34d399;
  --gradient-brand: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta));
  --shadow-glow: 0 0 40px rgba(34, 211, 238, 0.15), 0 0 80px rgba(99, 102, 241, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Outfit", system-ui, sans-serif;
  background-color: var(--bg-deep);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(99, 102, 241, 0.35), transparent),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(232, 121, 249, 0.2), transparent),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(34, 211, 238, 0.12), transparent),
    var(--bg-main);
  pointer-events: none;
}

a {
  color: var(--accent-cyan);
  transition: color 0.2s, text-shadow 0.2s;
}

a:hover {
  color: var(--accent-cyan);
  text-shadow: 0 0 16px rgba(34, 211, 238, 0.4);
}

input,
textarea,
select,
button {
  font: inherit;
}