/* ==========================================================================
   Cub Scout Pack 191 - Bootstrap 5.3 Custom Stylesheet & Design Tokens
   ========================================================================== */

:root {
  --bs-font-sans-serif: 'Outfit', system-ui, -apple-system, sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  --navy-dark: #071527;
  --navy-primary: #0B2545;
  --navy-royal: #0F2C59;
  --navy-light: #134074;
  --gold-primary: #FFC72C;
  --gold-warm: #F59E0B;
}

body {
  font-family: var(--bs-font-sans-serif);
  color: #1E293B;
  background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lexend', system-ui, sans-serif;
}

/* Custom Palette Utilities */
.bg-navy { background-color: var(--navy-primary) !important; }
.bg-navy-dark { background-color: var(--navy-dark) !important; }
.bg-navy-light { background-color: var(--navy-light) !important; }

.text-navy { color: var(--navy-primary) !important; }
.text-gold { color: var(--gold-primary) !important; }

.text-size-xs { font-size: 0.75rem; }
.text-size-sm { font-size: 0.85rem; }

.fw-extrabold { font-weight: 800; }
.tracking-tight { letter-spacing: -0.03em; }
.tracking-widest { letter-spacing: 0.15em; }

.border-white-15 { border-color: rgba(255, 255, 255, 0.15) !important; }
.max-width-700 { max-width: 700px; }
.max-width-800 { max-width: 800px; }

/* Custom Badge Colors */
.bg-gold { background-color: var(--gold-primary) !important; color: #0B2545 !important; }
.bg-purple { background-color: #8B5CF6 !important; }

/* Hero Section & Carousel */
.hero-section {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-primary), var(--navy-royal));
}

.hero-carousel-img {
  height: 380px;
  object-fit: cover;
  object-position: center;
}

.bg-dark-gradient {
  background: rgba(7, 21, 39, 0.85);
  backdrop-filter: blur(8px);
}

/* Step Badges */
.step-badge {
  width: 48px;
  height: 48px;
}

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

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(11, 37, 69, 0.1) !important;
}

/* Nav Pills */
.nav-pills .nav-link {
  color: var(--navy-primary);
  background-color: #FFFFFF;
  border: 1.5px solid #E2E8F0;
}

.nav-pills .nav-link.active {
  background-color: var(--navy-primary);
  color: #FFFFFF;
  border-color: var(--navy-primary);
}

/* Card Selection Checkboxes */
.card-select {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.card-select:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

.card-select .form-check-input:checked {
  background-color: var(--gold-primary);
  border-color: var(--gold-primary);
}

/* Buttons */
.btn-navy {
  background-color: var(--navy-primary);
  color: #FFFFFF;
}

.btn-navy:hover {
  background-color: var(--navy-royal);
  color: #FFFFFF;
}

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

.btn-outline-navy:hover {
  background-color: var(--navy-primary);
  color: #FFFFFF;
}

/* Forms & Documents Cards - Light High-Contrast Text */
#forms .card p,
#forms .text-light-subtle {
  color: #F1F5F9 !important;
  font-weight: 350;
  opacity: 0.95;
}