:root {
  --brand-base: #0C0A14;
  --brand-surface: #1A1626;
  --brand-accent: #8B5CF6;
  --brand-hook: #A78BFA;
  --brand-text: #F5F4FA;
  --brand-muted: #B8B3C7;
  --brand-border: #2E2840;
}

@font-face {
  font-family: "Anton";
  src: local("Anton");
  font-display: swap;
}

body {
  background-color: var(--brand-base);
  color: var(--brand-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
}

h1, h2, h3, .brand-hook {
  font-family: "Anton", "Inter", sans-serif;
  letter-spacing: 0.02em;
  color: var(--brand-text);
}

.text-hook, .brand-hook-text {
  color: var(--brand-hook);
}

.brand-mono, .metric-label, .badge, code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

a {
  color: var(--brand-hook);
}

a:hover {
  color: var(--brand-accent);
}

.navbar {
  background-color: var(--brand-surface) !important;
  border-bottom: 1px solid var(--brand-border);
}

.navbar-brand {
  font-family: "Anton", sans-serif;
  color: var(--brand-text) !important;
}

.nav-link {
  color: var(--brand-muted) !important;
}

.nav-link.active,
.nav-link:hover {
  color: var(--brand-text) !important;
}

.card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
}

.card-title {
  color: var(--brand-hook);
}

.btn-primary {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-text);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #7c4ded;
  border-color: #7c4ded;
  color: var(--brand-text);
}

.btn-outline-primary {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}

.btn-outline-primary:hover {
  background-color: var(--brand-accent);
  color: var(--brand-text);
}

.form-control,
.form-select {
  background-color: var(--brand-base);
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--brand-base);
  color: var(--brand-text);
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.35);
}

.form-control::placeholder {
  color: var(--brand-muted);
}

label,
.form-label {
  color: var(--brand-text);
}

.form-text,
.text-muted {
  color: var(--brand-muted) !important;
}

.invalid-feedback {
  color: #f5a3a3;
}

.is-invalid {
  border-color: #e05a5a !important;
}

.table {
  color: var(--brand-text);
  border-color: var(--brand-border);
}

.table > :not(caption) > * > * {
  background-color: var(--brand-surface);
  color: var(--brand-text);
  border-bottom-color: var(--brand-border);
}

.alert {
  border: 1px solid var(--brand-border);
}

.alert-success {
  background-color: rgba(139, 92, 246, 0.15);
  color: var(--brand-text);
  border-color: var(--brand-accent);
}

.alert-danger {
  background-color: rgba(224, 90, 90, 0.15);
  color: var(--brand-text);
  border-color: #e05a5a;
}

.alert-info {
  background-color: rgba(167, 139, 250, 0.15);
  color: var(--brand-text);
  border-color: var(--brand-hook);
}

.summary-card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.summary-card .metric-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 2rem;
  color: var(--brand-hook);
}

.summary-card .metric-label {
  color: var(--brand-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

footer {
  color: var(--brand-muted);
  border-top: 1px solid var(--brand-border);
}

.empty-state {
  color: var(--brand-muted);
  text-align: center;
  padding: 2rem 1rem;
}

*:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}