/* ============================================================================
   Jíbaro design system — Caribbean sea-glass
   Token reskin layered over Bootstrap 5.3 (retheme via --bs-* variables).
   Load AFTER Bootstrap and after any template inline <style>.
   ========================================================================== */

:root{
  /* --- brand tokens --- */
  --jb-bg:#f1f7f5;            /* page */
  --jb-surface:#ffffff;       /* cards / panels */
  --jb-surface-2:#f6faf8;     /* subtle fills */
  --jb-ink:#0f3338;           /* text */
  --jb-muted:#5a7678;         /* secondary text */
  --jb-line:#d6e6e2;          /* borders */
  --jb-teal:#117a86;          /* primary / action */
  --jb-teal-dk:#0d6069;
  --jb-teal-soft:#e3f1f0;
  --jb-coral:#e07856;         /* accent / primary CTA */
  --jb-coral-dk:#c75f3f;
  --jb-gold:#9a7334;          /* valuation */
  --jb-gold-bg:#f6eedd;
  --jb-gold-line:#e7d4ac;
  --jb-navy:#0f3338;          /* deep teal — top bar */
  --jb-radius:14px;
  --jb-shadow:0 1px 2px rgba(15,51,56,.06), 0 8px 24px rgba(15,51,56,.05);
  --jb-head:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --jb-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* --- retheme Bootstrap --- */
  --bs-primary:#117a86;
  --bs-primary-rgb:17,122,134;
  --bs-link-color:#0d6069;
  --bs-link-color-rgb:13,96,105;
  --bs-link-hover-color:#117a86;
  --bs-body-bg:#f1f7f5;
  --bs-body-color:#0f3338;
  --bs-border-color:#d6e6e2;
  --bs-font-sans-serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

body{ font-family:var(--jb-body); }  /* bg/color come from --bs-body-* so standalone pages keep their own body backgrounds */

/* headings + brandy bits in the display face */
h1,h2,h3,h4,h5,.navbar-brand,.display-1,.display-2,.display-3,.display-4,.card-title{
  font-family:var(--jb-head); letter-spacing:-.01em;
}
.lead{ color:var(--jb-muted); }

/* ---- top bar: deep teal instead of Bootstrap blue ---- */
.navbar.bg-primary{ background-color:var(--jb-navy) !important; }
.navbar-brand{ font-weight:800; }
.navbar-dark .navbar-nav .nav-link{ color:rgba(255,255,255,.88); }
.navbar-dark .navbar-nav .nav-link:hover{ color:#fff; }
.dropdown-menu{ border-color:var(--jb-line); border-radius:12px; box-shadow:var(--jb-shadow); }
.dropdown-item:active{ background-color:var(--jb-teal); }

/* ---- buttons ---- */
.btn-primary{
  --bs-btn-bg:var(--jb-teal); --bs-btn-border-color:var(--jb-teal);
  --bs-btn-hover-bg:var(--jb-teal-dk); --bs-btn-hover-border-color:var(--jb-teal-dk);
  --bs-btn-active-bg:var(--jb-teal-dk); --bs-btn-active-border-color:var(--jb-teal-dk);
  --bs-btn-disabled-bg:var(--jb-teal); --bs-btn-disabled-border-color:var(--jb-teal);
  font-weight:600;
}
.btn-outline-primary{
  --bs-btn-color:var(--jb-teal-dk); --bs-btn-border-color:var(--jb-teal);
  --bs-btn-hover-bg:var(--jb-teal); --bs-btn-hover-border-color:var(--jb-teal);
  --bs-btn-active-bg:var(--jb-teal-dk);
}
/* coral accent CTA — the "do the thing" button */
.btn-accent{
  --bs-btn-color:#fff; --bs-btn-bg:var(--jb-coral); --bs-btn-border-color:var(--jb-coral);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--jb-coral-dk); --bs-btn-hover-border-color:var(--jb-coral-dk);
  --bs-btn-active-bg:var(--jb-coral-dk); --bs-btn-active-border-color:var(--jb-coral-dk);
  font-weight:700;
}

/* ---- text/links accents ---- */
.text-primary{ color:var(--jb-teal-dk) !important; }

/* ---- cards ---- */
.card{
  border-color:var(--jb-line); border-radius:var(--jb-radius);
  background:var(--jb-surface); box-shadow:var(--jb-shadow);
}
.property-card:hover,.card.h-100:hover{ transform:translateY(-3px); transition:transform .2s ease; }

/* ---- the AI badge: sea-glass, not purple ---- */
.ai-badge{
  background:var(--jb-teal-soft) !important; color:var(--jb-teal-dk) !important;
  font-weight:600; border:1px solid var(--jb-line);
  font-size:.75rem; padding:.3rem .6rem; border-radius:20px; display:inline-block;
}

/* ---- valuation emphasis utility (Estimado Jíbaro) ---- */
.jb-valuation{
  background:var(--jb-gold-bg); border:1px solid var(--jb-gold-line);
  color:var(--jb-gold); border-radius:12px;
}

/* ---- footer ---- */
footer{
  background:var(--jb-surface-2) !important; border-top:1px solid var(--jb-line);
  color:var(--jb-muted);
}

/* ---- forms ---- */
.form-control:focus,.form-select:focus{
  border-color:var(--jb-teal); box-shadow:0 0 0 .2rem rgba(17,122,134,.18);
}