:root {
  --bg-base: #000000;
  --bg-surface: #111111;
  --text-primary: #EDEEF0;
  --text-secondary: #A0A0B0;
  --accent: #5A9DF2;          /* Vibrant blue – primary button bg */
  --accent-hover: #4040F0;    /* Darker on hover */
  --accent-text: #000000;     /* Black text for max readability/contrast */
  --accent-muted: #3B82F6;    /* For secondary buttons if needed */
  --border: #222222;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;                /* or thin #222 border if you want subtle edge */
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-primary:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

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

a:hover {
  text-decoration: underline;
}