/* CSS Variables from Design File */
:root {
  --bg-card: #12121A;
  --bg-card-hover: #1A1A25;
  --bg-dark: #0A0A0F;
  --border-dark: #1E1E2E;
  --neon: #CAFF04;
  --neon-dim: #A3D900;
  --purple: #8B5CF6;
  --purple-dim: #6D28D9;
  --purple-glow: #A78BFA;
  --text-dim: #3A3A50;
  --text-gray: #6B6B80;
  --text-white: #F0F0F5;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-white);
  overflow-x: hidden;
}

/* Font Family Utilities */
.font-inter {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-jetbrains {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Grid Canvas */
#gridCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Selection Colors */
::selection {
  background-color: var(--neon);
  color: var(--bg-dark);
}

::-moz-selection {
  background-color: var(--neon);
  color: var(--bg-dark);
}