:root {
  --bg: #050505;
  --fg: #ffffff;
  --muted: #a3a3a3;
  --unc: #eab308;
  --unc-soft: #facc15;
  --brainrot: #22c55e;
  --brainrot-soft: #4ade80;
  --magenta: #ec4899;
}

html,
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-impact {
  font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  letter-spacing: 0.01em;
}

.glitch-shadow {
  text-shadow:
    2px 0 var(--brainrot),
    -2px 0 var(--magenta);
}

/* Faction-aware accents — let CSS handle theming without inline styles. */
.faction-unc .accent-bg {
  background: var(--unc);
  color: #000;
}
.faction-unc .accent-text {
  color: var(--unc);
}
.faction-unc .accent-border {
  border-color: rgba(234, 179, 8, 0.4);
}

.faction-brainrot .accent-bg {
  background: var(--brainrot);
  color: #000;
}
.faction-brainrot .accent-text {
  color: var(--brainrot);
}
.faction-brainrot .accent-border {
  border-color: rgba(34, 197, 94, 0.4);
}

.faction-neutral .accent-bg {
  background: var(--fg);
  color: #000;
}
.faction-neutral .accent-text {
  color: var(--fg);
}
.faction-neutral .accent-border {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Card hover lift */
.card {
  transition:
    transform 200ms ease,
    border-color 200ms ease;
}
.card:hover {
  transform: translateY(-2px);
}