/* Klaxon-inspired minimal theme, layered over Bootstrap 5 */

:root {
  --bg: #f3efe6;          /* warm paper */
  --surface: #fffdf7;
  --ink: #17130d;         /* near-black, warm */
  --muted: #6d6456;
  --soft: #ddd5c5;
  --accent: #d8401f;      /* vermilion */
  --accent-deep: #b3300f;
  --ok: #2f7d4f;
  --warn: #9a6400;
  --bad: #c0271f;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 4px;
  --shadow: 5px 5px 0 var(--ink);

  /* Bootstrap variable overrides */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 216, 64, 31;
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 216, 64, 31;
  --bs-link-hover-color: var(--accent-deep);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-body-font-family: var(--sans);
  --bs-border-color: var(--ink);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
h1, .h1 { font-size: 2.2rem; }
h2, .h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; }
h3, .h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.lead { color: var(--muted); font-weight: 400; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }
.text-muted { color: var(--muted) !important; }

/* Accent underline for page titles, like the Klaxon wordmark */
.page-title {
  display: inline-block;
  border-bottom: 4px solid var(--accent);
  padding-bottom: 2px;
  margin-bottom: .5rem;
}

/* ---- Navbar ---- */
.navbar {
  background: var(--surface) !important;
  border-bottom: 2px solid var(--ink);
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--ink) !important;
  font-family: var(--display);
  font-weight: 500;
}
.navbar .navbar-brand { font-weight: 700; letter-spacing: -.01em; }
.navbar .nav-link:hover { color: var(--accent) !important; }
.navbar-toggler { border-color: var(--ink); }
.dropdown-menu {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.dropdown-item:active { background: var(--accent); }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header {
  background: transparent;
  border-bottom: 2px solid var(--ink);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
}
.card-footer { background: transparent; border-top: 2px solid var(--soft); }
.card.bg-light, .card.bg-success, .card.bg-primary {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--display);
  font-weight: 700;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .05s, box-shadow .05s, background .12s;
}
.btn:hover { transform: none; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-secondary {
  background: var(--accent);
  border-color: var(--ink);
  color: #fff;
}
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-secondary:hover {
  background: var(--accent-deep);
  color: #fff;
}
.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-outline-warning,
.btn-outline-danger {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-secondary:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--ink);
}
.btn-sm { box-shadow: 2px 2px 0 var(--ink); }

/* ---- Forms ---- */
.form-control, .form-select {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  outline: 3px solid var(--accent);
  outline-offset: 0;
  border-color: var(--ink);
  box-shadow: none;
}

/* ---- Tables ---- */
.table { --bs-table-bg: transparent; color: var(--ink); }
.table > thead {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--ink);
}

/* ---- Badges ---- */
.badge {
  font-family: var(--mono);
  font-weight: 600;
  border-radius: var(--radius);
}
.badge.bg-primary { background: var(--ink) !important; color: var(--bg); }

/* ---- Alerts ---- */
.alert {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
  color: var(--ink);
}

/* ---- List groups ---- */
.list-group-item { background: transparent; border-color: var(--soft); }

/* ---- Status colors ---- */
.status-qualified { color: var(--ok); font-weight: 700; }
.status-wild-card { color: var(--accent); font-weight: 700; }
.status-pending   { color: var(--warn); font-weight: 700; }
.status-unqualified { color: var(--muted); }

/* ---- Stat cards (homepage) ---- */
.card-stat { text-align: center; }
.card-stat .display-4 {
  font-size: 2.5rem;
  font-family: var(--display);
  color: var(--accent);
}

/* ---- Footer ---- */
footer .text-muted { color: var(--muted) !important; }
footer hr { border-color: var(--soft); }