/* ============================= */
/* Swimming Club Bootstrap Theme */
/* ============================= */

/* 1. Color Variables */
:root {
  --bs-primary: #0d3b66;    /* Dark Blue */
  --bs-secondary: #00a6fb;  /* Light Blue */
  --bs-success: #f39237;    /* Orange - used for accents/CTA */
  --bs-danger: #b03020;     /* Brick Red - alerts or highlights */
  --bs-white: #ffffff;
  --bs-light: #f7f9fc;
  --bs-dark: #222222;
  --bs-muted: #6c757d;
  

  /* Typography */
  --bs-body-font-family: 'Open Sans', sans-serif;
  --bs-heading-font-family: 'Montserrat', sans-serif;
  --bs-body-color: var(--bs-dark);
  --bs-body-bg: var(--bs-light);

  /* Borders & Shadows */
  --bs-border-radius: 0.5rem;
  --bs-box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* 2. Body and Headings */
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--bs-heading-font-family);
  color: var(--bs-primary);
}

/* 3. Links */
a {
  color: var(--bs-success);
  text-decoration: none;
}

a:hover {
  color: var(--bs-danger);
  text-decoration: underline;
}

/* 4. Buttons */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}

.btn-primary:hover {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: var(--bs-white);
}

.btn-accent {
  background-color: var(--bs-success);
  color: var(--bs-white);
  border: none;
}

.btn-accent:hover {
  background-color: var(--bs-danger);
}

/* 5. Navbar */
.navbar, .navbar-nav .nav-link {
  font-weight: 600;
}

.navbar {
  background-color: var(--bs-primary);
}

.navbar-nav .nav-link {
  color: var(--bs-white);
}

.navbar-nav .nav-link:hover {
  color: var(--bs-success);
}

/* 6. Cards */
.card {
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
  background-color: var(--bs-white);
}

.card-title {
  color: var(--bs-primary);
}

.card-text {
  color: var(--bs-dark);
}

/* 7. Counters */
.counter-box h2 {
  color: var(--bs-primary);
}

.counter-box p {
  color: var(--bs-muted);
}

/* 8. News Section */
.news-item {
  background: var(--bs-white);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
}

.news-item h5 {
  color: var(--bs-primary);
}

.news-item p {
  color: var(--bs-dark);
}

.news-item .badge {
  border-radius: 0.25rem;
}

/* 9. Merch Section */
.merch-scroll .card {
  box-shadow: var(--bs-box-shadow);
  border-radius: var(--bs-border-radius);
}

/* 10. Footer */
footer {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

footer h5 {
  color: var(--bs-white);
}

footer a {
  color: var(--bs-white);
}

footer a:hover {
  color: var(--bs-success);
}

footer .btn {
  border-radius: var(--bs-border-radius);
}

/* 11. Utility Classes */
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-accent { color: var(--bs-success) !important; }
.text-danger { color: var(--bs-danger) !important; }

.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-accent { background-color: var(--bs-success) !important; }
.bg-danger { background-color: var(--bs-danger) !important; }