:root {
  --bg: #0b0d10;
  --bg-soft: #11141a;
  --bg-elevated: #1a1d24;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text: #e6e8eb;
  --text-muted: #9aa0a6;
  --text-subtle: #6b7280;
  --accent: #4fd1c5;
  --accent-soft: rgba(79, 209, 197, 0.15);
  --accent-hover: #3dbfad;
}

/* Alternative accent colors - change the accent variable above to switch */
/* 
  Teal: #4fd1c5 (default)
  Purple: #a78bfa
  Blue: #60a5fa
  Pink: #f472b6
  Amber: #fbbf24
*/

body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

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

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}