@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

:root {
  --brand-red: #B91C1C;
  --brand-red-dark: #7F1D1D;
  --charcoal: #1C1C1E;
  --grey-900: #1C1C1E;
  --grey-700: #52525b;
  --grey-400: #BDBDBD;
  --grey-300: #D0D0D0;
  --grey-200: #E0E0E0;
  --off-white: #F4F4F4;
  --danger: #B91C1C;
  --soft-red: #FFEBEE;
}

body {
  font-family: "Barlow", "Segoe UI", sans-serif;
  background: var(--off-white);
  color: var(--grey-900);
}

.navbar.navbar-dark.bg-dark {
  background: var(--charcoal) !important;
  border-bottom: 2px solid var(--brand-red);
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link,
.navbar-dark .navbar-text {
  color: #fff !important;
}

.card {
  border: 1px solid var(--grey-200);
  box-shadow: 0 8px 20px rgba(66, 66, 66, 0.08);
}

.card-header {
  border-bottom: 1px solid var(--grey-200);
}

.card-header.bg-secondary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-dark {
  background: var(--grey-900) !important;
  color: #fff !important;
}

.badge.bg-warning,
.badge.bg-success,
.badge.bg-info {
  background: var(--grey-200) !important;
  color: var(--grey-900) !important;
}

.badge.bg-danger {
  background: var(--danger) !important;
}

.btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red-dark);
}

.btn-primary:hover,
.btn-primary:focus {
  background: #991B1B;
  border-color: var(--brand-red-dark);
}

.btn-outline-secondary {
  color: var(--grey-900);
  border-color: var(--grey-400);
}

.btn-outline-secondary:hover {
  background: var(--grey-200);
  border-color: var(--grey-300);
  color: var(--grey-900);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
}

.btn-success,
.btn-info {
  background: var(--brand-red);
  border-color: var(--brand-red-dark);
  color: #fff;
}

.btn-success:hover,
.btn-info:hover,
.btn-success:focus,
.btn-info:focus {
  background: #991B1B;
  border-color: var(--brand-red-dark);
  color: #fff;
}

.btn-warning {
  background: var(--grey-700);
  border-color: var(--grey-700);
  color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
  background: var(--grey-900);
  border-color: var(--grey-900);
  color: #fff;
}

.btn-light {
  background: #fff;
  border-color: var(--grey-300);
  color: var(--grey-900);
}

.btn-light:hover,
.btn-light:focus {
  background: var(--grey-200);
  border-color: var(--grey-300);
  color: var(--grey-900);
}

.nav-tabs {
  border-bottom: 1px solid var(--grey-300);
}

.nav-tabs .nav-link {
  border: none;
  color: var(--grey-700);
  padding: 0.65rem 1rem;
}

.nav-tabs .nav-link:hover {
  color: var(--grey-900);
}

.nav-tabs .nav-link.active {
  color: var(--brand-red);
  border-bottom: 3px solid var(--brand-red);
  background: transparent;
  font-weight: 600;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.15);
}

.btn-danger:hover,
.btn-danger:focus {
  background: #b71c1c;
  border-color: #b71c1c;
}

.table-dark {
  --bs-table-bg: var(--charcoal);
  --bs-table-color: #fff;
}

.table-light {
  --bs-table-bg: var(--grey-200);
}

.alert-success {
  background: #e3f2fd;
  border-color: #cfe8ff;
  color: #0b4f7a;
}

.alert-warning {
  background: var(--soft-red);
  border-color: #ffcdd2;
  color: var(--danger);
}

.alert-danger {
  background: var(--soft-red);
  border-color: #ffcdd2;
  color: var(--danger);
}