:root {
   --es-red: #aa151b;
   --es-red-dark: #8a1015;
   --es-gold: #f1bf00;
   --es-gold-dark: #d9aa00;
   --es-gold-soft: #fff6d6;
   --ink: #2b1d1d;
   --muted: #6a5750;

   --bs-body-color: var(--ink);
   --bs-secondary-color: var(--muted);
   --bs-warning-rgb: 241, 191, 0;
   --bs-link-color-rgb: 170, 21, 27;
   --bs-link-hover-color-rgb: 138, 16, 21;
}

body {
   color: var(--ink);
}


.card-img-top {
   height: 220px;
   object-fit: cover;
}

.card {
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
   transform: translateY(-3px);
   box-shadow: 0 0.75rem 1.5rem rgba(170, 21, 27, 0.22) !important;
}


.navbar.bg-dark {
   background-color: var(--es-red-dark) !important;
   border-bottom: 4px solid var(--es-gold);
}

.navbar.navbar-dark {
   --bs-navbar-brand-color: var(--es-gold);
   --bs-navbar-brand-hover-color: #fff;
   --bs-navbar-color: rgba(255, 255, 255, 0.85);
   --bs-navbar-hover-color: var(--es-gold);
   --bs-navbar-active-color: var(--es-gold);
}

.navbar-nav .nav-link.active {
   font-weight: 600;
}

footer.bg-dark {
   background-color: var(--es-red-dark) !important;
   border-top: 4px solid var(--es-gold);
}

footer .text-secondary {
   color: rgba(255, 255, 255, 0.75) !important;
}


header.bg-light {
   background-color: var(--es-gold-soft) !important;
   background-image: linear-gradient(
      to bottom,
      transparent calc(100% - 12px),
      var(--es-red) calc(100% - 12px),
      var(--es-red) calc(100% - 9px),
      var(--es-gold) calc(100% - 9px),
      var(--es-gold) calc(100% - 3px),
      var(--es-red) calc(100% - 3px)
   );
   padding-bottom: 3.5rem !important;
}

h1 {
   color: var(--es-red);
}


.card {
   border: 0;
   border-top: 4px solid var(--es-gold);
}

.card-title {
   color: var(--es-red);
}


.btn-primary {
   --bs-btn-bg: var(--es-red);
   --bs-btn-border-color: var(--es-red);
   --bs-btn-hover-bg: var(--es-red-dark);
   --bs-btn-hover-border-color: var(--es-red-dark);
   --bs-btn-active-bg: var(--es-red-dark);
   --bs-btn-active-border-color: var(--es-red-dark);
   --bs-btn-disabled-bg: var(--es-red);
   --bs-btn-disabled-border-color: var(--es-red);
   --bs-btn-focus-shadow-rgb: 170, 21, 27;
}

.btn-outline-primary,
.btn-outline-secondary {
   --bs-btn-color: var(--es-red);
   --bs-btn-border-color: var(--es-red);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--es-red);
   --bs-btn-hover-border-color: var(--es-red);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--es-red-dark);
   --bs-btn-active-border-color: var(--es-red-dark);
   --bs-btn-focus-shadow-rgb: 170, 21, 27;
}


@media (prefers-reduced-motion: reduce) {
   .card,
   .card:hover {
      transition: none;
      transform: none;
   }
}