/* NELA Hospitality Pro – Bootstrap Theme
   Palette:
   Bayou Green        #2F5D50
   Pelican White      #F8F7F4
   Seal Navy          #1C3552
   Cypress Gold       #CBAE70
   Alligator Gray     #5B5E5C
   Hospitality Sand   #E3D9C5
   River Blue         #4B9CD3
   Sunset Coral       #E87461
*/

/* ---------- Core variables (Bootstrap v5 compatible) ---------- */
:root {
  /* Brand palette */
  --nela-bayou: #2F5D50;
  --nela-bayou-700: #274d43;
  --nela-bayou-800: #203f37;
  --nela-pelican: #F8F7F4;
  --nela-seal: #1C3552;
  --nela-seal-700: #162a40;
  --nela-seal-800: #0f2033;
  --nela-cypress: #CBAE70;
  --nela-alligator: #5B5E5C;
  --nela-sand: #E3D9C5;
  --nela-sand-600: #d8cdb3;
  --nela-river: #4B9CD3;
  --nela-river-700: #3a84b6;
  --nela-coral: #E87461;
  --nela-coral-700: #d65e4a;

  /* Map palette into Bootstrap variables */
  --bs-primary: var(--nela-bayou);
  --bs-primary-rgb: 47, 93, 80;
  --bs-secondary: var(--nela-seal);
  --bs-secondary-rgb: 28, 53, 82;
  --bs-success: #2f8f6b;
  --bs-info: var(--nela-river);
  --bs-warning: var(--nela-cypress);
  --bs-danger: var(--nela-coral);
  --bs-light: var(--nela-pelican);
  --bs-dark: var(--nela-alligator);

  --bs-body-bg: var(--nela-pelican);
  --bs-body-color: var(--nela-alligator);
  --bs-heading-color: var(--nela-seal);

  --bs-link-color: var(--nela-river);
  --bs-link-hover-color: var(--nela-river-700);

  --bs-border-color: color-mix(in srgb, var(--nela-sand) 70%, #0000);
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;

  --bs-code-color: var(--nela-seal);
  --bs-highlight-bg: color-mix(in srgb, var(--nela-cypress) 20%, #fff);
}

/* ---------- Base ---------- */
html, body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

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

/* ---------- Buttons ---------- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nela-bayou);
  --bs-btn-border-color: var(--nela-bayou);
  --bs-btn-hover-bg: var(--nela-bayou-700);
  --bs-btn-hover-border-color: var(--nela-bayou-700);
  --bs-btn-active-bg: var(--nela-bayou-800);
  --bs-btn-active-border-color: var(--nela-bayou-800);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--nela-bayou) 50%, #fff);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--nela-bayou) 50%, #fff);
  border-radius: var(--bs-border-radius);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nela-seal);
  --bs-btn-border-color: var(--nela-seal);
  --bs-btn-hover-bg: var(--nela-seal-700);
  --bs-btn-hover-border-color: var(--nela-seal-700);
  --bs-btn-active-bg: var(--nela-seal-800);
  --bs-btn-active-border-color: var(--nela-seal-800);
  border-radius: var(--bs-border-radius);
}

.btn-outline-primary {
  --bs-btn-color: var(--nela-bayou);
  --bs-btn-border-color: var(--nela-bayou);
  --bs-btn-hover-bg: var(--nela-bayou);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--nela-bayou);
  border-radius: var(--bs-border-radius);
}

.btn-outline-secondary {
  --bs-btn-color: var(--nela-seal);
  --bs-btn-border-color: var(--nela-seal);
  --bs-btn-hover-bg: var(--nela-seal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--nela-seal);
  border-radius: var(--bs-border-radius);
}

/* Call-to-action button variant */
.btn-gold {
  --bs-btn-color: #1d1d1b;
  --bs-btn-bg: var(--nela-cypress);
  --bs-btn-border-color: var(--nela-cypress);
  --bs-btn-hover-bg: color-mix(in srgb, var(--nela-cypress) 90%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--nela-cypress) 90%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--nela-cypress) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--nela-cypress) 80%, #000);
  border-radius: var(--bs-border-radius);
}

/* ---------- Links ---------- */
a {
  text-underline-offset: .2em;
}
a:hover {
  text-decoration-thickness: .12em;
}

/* ---------- Navbar ---------- */
.navbar {
  --bs-navbar-color: color-mix(in srgb, var(--nela-pelican) 80%, #000);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: #ffffff66;
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar.bg-primary, .navbar.navbar-dark {
  background-color: var(--nela-seal) !important;
}
.navbar .nav-link.active {
  color: var(--nela-cypress) !important;
}

/* ---------- Cards ---------- */
.card {
  background-color: color-mix(in srgb, var(--nela-pelican) 92%, var(--nela-sand) 8%);
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.card-header {
  background-color: color-mix(in srgb, var(--nela-sand) 60%, #fff);
  border-bottom-color: var(--bs-border-color);
  color: var(--nela-seal);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  background-color: #fff;
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.form-control:focus, .form-select:focus {
  border-color: var(--nela-bayou);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--nela-bayou) 25%, #0000);
}

/* ---------- Alerts ---------- */
.alert-primary {
  --bs-alert-color: var(--nela-bayou-800);
  --bs-alert-bg: color-mix(in srgb, var(--nela-bayou) 10%, #fff);
  --bs-alert-border-color: color-mix(in srgb, var(--nela-bayou) 25%, #fff);
}
.alert-secondary {
  --bs-alert-color: var(--nela-seal-800);
  --bs-alert-bg: color-mix(in srgb, var(--nela-seal) 10%, #fff);
  --bs-alert-border-color: color-mix(in srgb, var(--nela-seal) 25%, #fff);
}
.alert-info {
  --bs-alert-color: var(--nela-seal);
  --bs-alert-bg: color-mix(in srgb, var(--nela-river) 12%, #fff);
  --bs-alert-border-color: color-mix(in srgb, var(--nela-river) 30%, #fff);
}
.alert-warning {
  --bs-alert-color: #5a461a;
  --bs-alert-bg: color-mix(in srgb, var(--nela-cypress) 18%, #fff);
  --bs-alert-border-color: color-mix(in srgb, var(--nela-cypress) 40%, #fff);
}
.alert-danger {
  --bs-alert-color: #5b2620;
  --bs-alert-bg: color-mix(in srgb, var(--nela-coral) 18%, #fff);
  --bs-alert-border-color: color-mix(in srgb, var(--nela-coral) 40%, #fff);
}

/* ---------- Badges ---------- */
.badge-primary { background-color: var(--nela-bayou); }
.badge-secondary { background-color: var(--nela-seal); }
.badge-gold { background-color: var(--nela-cypress); color:#1d1d1b; }
.badge-info { background-color: var(--nela-river); }
.badge-danger { background-color: var(--nela-coral); }

/* ---------- Tables ---------- */
.table {
  --bs-table-striped-bg: color-mix(in srgb, var(--nela-sand) 25%, #fff);
  --bs-table-hover-bg: color-mix(in srgb, var(--nela-sand) 35%, #fff);
  --bs-table-border-color: var(--bs-border-color);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--nela-seal);
  color: #fff;
  border-top: 4px solid var(--nela-cypress);
}
.site-footer a { color: var(--nela-cypress); }
.site-footer a:hover { color: color-mix(in srgb, var(--nela-cypress) 85%, #000); }

/* ---------- Utility helpers ---------- */
.bg-bayou { background-color: var(--nela-bayou) !important; }
.bg-seal { background-color: var(--nela-seal) !important; }
.bg-sand { background-color: var(--nela-sand) !important; }
.text-bayou { color: var(--nela-bayou) !important; }
.text-seal { color: var(--nela-seal) !important; }
.text-gold { color: var(--nela-cypress) !important; }
.border-sand { border-color: var(--nela-sand-600) !important; }

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: #0f1a24;
    --bs-body-color: #e9ecef;
    --bs-heading-color: #f2f4f7;
    --bs-border-color: #223142;
    --bs-link-color: var(--nela-river);
    --bs-link-hover-color: var(--nela-river-700);
  }
  .card {
    background-color: #112131;
    border-color: var(--bs-border-color);
  }
  .card-header {
    background-color: #0f2033;
    color: #f2f4f7;
  }
  .form-control, .form-select {
    background-color: #0f1a24;
    color: #e9ecef;
    border-color: var(--bs-border-color);
  }
  .navbar.bg-primary, .navbar.navbar-dark {
    background-color: var(--nela-seal) !important;
  }
  .table {
    --bs-table-color: #e9ecef;
    --bs-table-bg: #0f1a24;
    --bs-table-striped-bg: #142031;
    --bs-table-hover-bg: #17263a;
    --bs-table-border-color: var(--bs-border-color);
  }
  .site-footer {
    background: #0f2033;
    border-top-color: var(--nela-bayou);
  }
}