:root {
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;

  --primary: #3b82f6;
  --primary-hover: #2563eb;

  --danger-bg: #3f1d1d;
  --danger-border: #7f1d1d;
  --danger-text: #fecaca;

  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --font: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}

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

a:hover {
  color: var(--text);
  background-color: var(--primary-hover);
  text-decoration: none;
}

/* Ensure link hover styles never override button text */
a.btn,
a.btn:visited,
a.btn:hover,
a.btn:focus,
a.btn:active {
  color: inherit;
  text-decoration: none;
}

/* If you have a primary button class, force text colour to stay visible on hover */
a.btn-primary,
a.btn-primary:visited {
  color: var(--btn-primary-fg);
}

a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
  color: var(--btn-primary-fg);
}

/* Buttons (works for <a> and <button>) */
.btn {
  display: inline-flex;
  align-items: centre;
  justify-content: centre;
  gap: 8px;

  padding: 12px 16px;
  border-radius: var(--radius);
  border: 0;

  background: var(--primary);
  color: #ffffff;

  font-weight: 600;
  line-height: 1;
  cursor: pointer;

  text-decoration: none; /* important for <a> */
  appearance: none;      /* helps <button> look consistent */
}

.btn:hover,
.btn:focus,
.btn:active {
  background: var(--primary-hover);
  color: #ffffff;        /* critical: stops link hover colour taking over */
  text-decoration: none; /* critical for <a> */
}

.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}