/* =====================================================================
   ByDiva Store — Color & Typography Refactor (non-breaking override)
   Drop this file AFTER your current theme.css to recolor + re-font only.
   It DOES NOT change spacing, sizing, display or layout properties.
   ===================================================================== */

/* -------- Brand Palette (derived from logo) -------- */
:root{
  --brand-pink:#f4a9c6;
  --brand-pink-700:#e07aa6;
  --brand-ink:#2b2b2b;
  --brand-ink-900:#111111;
  --brand-border:#e6e6e6;
  --brand-muted:#6b6b6b;

  /* Map Bootstrap-like tokens to brand */
  --primary:var(--brand-pink);
  --primary-strong:var(--brand-pink-700);
  --text-color:var(--brand-ink);
  --text-strong:var(--brand-ink-900);
  --border-color:var(--brand-border);
  --muted:var(--brand-muted);
}

/* -------- Typography -------- */
/* Headings: elegant serif akin to the logo; Body: clean sans */
html, body{
  color:var(--text-color);
}
/* Expect the project to load Playfair Display externally; otherwise fallbacks apply */
h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4{
  font-family: "Playfair Display", "Cormorant Garamond", "Times New Roman", Times, serif;
  color:var(--text-strong);
  letter-spacing: .01em;
  font-weight: 600; /* keep weight similar to logo strokes */
}
/* Body remains sans for readability; keep existing stack but ensure contrast */
body, html, p, li, input, textarea, select, button, small, .small{
  font-family: "Mali", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text-color);
}

/* -------- Links -------- */
a{
  color:var(--primary);
  text-decoration: none;
}
a:hover, a:focus{
  color:var(--primary-strong);
  text-decoration: underline;
  outline: none;
}

/* -------- Buttons -------- */
/* Primary */
.btn-primary{
  background-color: var(--primary);
  border-color: var(--primary);
  color:#fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background-color: var(--primary-strong);
  border-color: var(--primary-strong);
  color:#fff;
}
.btn-outline-primary{
  color: var(--primary);
  border-color: var(--primary);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active{
  color:#fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Secondary & tertiary keep neutral greys for contrast */
.btn-secondary, .btn-tertiary{
  color: var(--text-color);
  background-color: #f7f7f7;
  border-color: var(--border-color);
}
.btn-secondary:hover, .btn-tertiary:hover,
.btn-secondary:focus, .btn-tertiary:focus{
  background-color: #ececec;
  border-color: var(--border-color);
}

/* -------- Forms -------- */
.form-control{
  color: var(--text-color);
  border-color: var(--border-color);
}
.form-control::placeholder{
  color: var(--muted);
  opacity: 1;
}
.form-control:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(244,169,198,.25);
  outline: 0;
}

/* Custom controls */
.custom-control-input:checked ~ .custom-control-indicator{
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Range, selects */
.custom-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(244,169,198,.25);
}

/* -------- Navigation -------- */
.navbar-light .navbar-nav .nav-link{
  color: var(--text-color);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus{
  color: var(--primary-strong);
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active{
  color: var(--primary);
}
.navbar-brand, .navbar-light .navbar-brand{
  color: var(--text-strong);
}
.navbar-brand:hover{
  color: var(--primary-strong);
}

/* -------- Pills/Tabs -------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  background-color: var(--primary);
  color:#fff;
}
.nav-tabs .nav-link:hover{
  border-color: var(--border-color) var(--border-color) transparent;
}
.nav-tabs .nav-link.active{
  color: var(--text-strong);
  border-color: var(--border-color) var(--border-color) #fff;
}

/* -------- Badges/Labels -------- */
.badge-primary{ background-color: var(--primary); }
.text-primary{ color: var(--primary)!important; }
.bg-primary{ background-color: var(--primary)!important; }
.border-primary{ border-color: var(--primary)!important; }

/* -------- Cards/Lists/Separators -------- */
.card{
  border-color: rgba(0,0,0,.08);
}
.card-header, .card-footer{
  background-color:#fafafa;
  border-color: rgba(0,0,0,.08);
}
.table td, .table th{ border-top-color: var(--border-color); }
hr{ border-top-color: var(--border-color); }

/* -------- Alerts -------- */
.alert-primary{
  color:#4f2b38; /* readable on soft pink */
  background-color:#fdeaf2;
  border-color:#f8d5e5;
}

/* -------- Pagination -------- */
.page-link{
  color: var(--primary);
  border-color: var(--border-color);
}
.page-link:hover{
  color:#fff;
  background-color: var(--primary);
  border-color: var(--primary);
}
.page-item.active .page-link{
  background-color: var(--primary);
  border-color: var(--primary);
}

/* -------- Progress -------- */
.progress-bar{
  background-color: var(--primary);
}

/* -------- Misc components that used strong brand color before -------- */
/* Replace old teal (#24b9d7 family) wherever it appears with brand pink. */
a.btn-link,
.btn-link{
  color: var(--primary);
}
.btn-link:hover, .btn-link:focus{
  color: var(--primary-strong);
  text-decoration: underline;
}

/* Breadcrumbs */
.breadcrumb a{ color: var(--primary); }
.breadcrumb a:hover{ color: var(--primary-strong); }

/* Forms validation colors remain Bootstrap defaults for clarity. */

/* -------- Accessibility: high-contrast utilities -------- */
.badge, .btn{
  text-shadow: none; /* keep crisp */
}
:focus-visible{
  outline: 2px solid rgba(244,169,198,.6);
  outline-offset: 2px;
}

/* -------- Optional: hero banners & chips (if present) -------- */
.chip, .tag{
  background-color:#fff;
  border:1px solid var(--border-color);
  color:var(--text-color);
}
.chip.is-active, .tag.is-active{
  background-color: var(--primary);
  color:#fff;
  border-color: var(--primary);
}

/* -------- Do not touch layout: DO NOT change display, flex, grid, margins, widths. -------- */