:root{ --rose:#8c1357; --teal:#0ea5a2; --gold: #d4af37; --ink:#1f2937; }
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:1rem;padding:.85rem 1.1rem;font-weight:800;letter-spacing:.2px;box-shadow:0 6px 18px rgba(0,0,0,.08);transition:transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(90deg, var(--rose), #b61a74);color:white}
.btn-outline{border:2px solid var(--rose);color:var(--rose);background:white}
.btn-alt{background:linear-gradient(90deg, var(--teal), #14b8a6);color:white}
.chip{display:inline-block;border-radius:9999px;padding:.35rem .7rem;font-weight:700}
.chip-rose{background:#fde3f0;color:var(--rose)}
.card{border:1px solid #e5e7eb;border-radius:1.25rem;background:white;box-shadow:0 8px 30px rgba(30,10,60,.04)}
.section-title{font-weight:900;letter-spacing:.2px}
.t-hide{display:none}
.hero{background:radial-gradient(1000px 600px at -10% -10%, #ffd0e6 0, rgba(255,208,230,0) 45%),linear-gradient(180deg, #ffffff 0, #fff7fb 100%)}
.divider{height:3px;background:linear-gradient(90deg,var(--rose),var(--gold),var(--teal));border-radius:9999px}
.icon{width:20px;height:20px;display:inline-block;vertical-align:middle}
.banner{
  background: linear-gradient(90deg, #d4af37, #f6d565, #ffd0e6, #f2a2c3);
  color: #1f2937;
}
/* Rose + Gold color scheme overrides */
a, a:visited { color: #8c1357; }
a:hover { color: #d4af37; }
/* Light mode primary button — ensure text contrasts */
.btn-primary { 
  background: linear-gradient(90deg, var(--rose), #b61a74); 
  color: #fff; /* default for dark backgrounds */
}

.btn-primary.gold-bg { /* special variant for gold backgrounds */
  background: linear-gradient(90deg, var(--gold), #d4af37);
  color: #111; /* dark text for gold */
}
.btn-primary:hover { background: #d4af37; color: white; }
.btn-outline { border: 2px solid #8c1357; color: #8c1357; background: white; }
.btn-outline:hover { background: #8c1357; color: white; }
.btn-alt { background: linear-gradient(90deg, #d4af37, #d4af37); color: white; }
.btn-alt:hover { background: #8c1357; color: white; }
.chip-rose { background: #fde3f0; color: #8c1357; }
.chip-gold { background: #fff1d6; color: #b45309; }
/* Map button and contact form button overrides */
#hours .btn-primary, #contact .btn-primary { background: linear-gradient(90deg, #8c1357, #b61a74); }
#hours .btn-primary:hover, #contact .btn-primary:hover { background: #d4af37; }
/* Slick nav links */
.nav-link { position: relative; display: inline-block; padding-bottom: 6px; transition: color .2s ease; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--rose, #8c1357), #b61a74, var(--gold, #d4af37));
  transition: width .25s ease;
  border-radius: 2px;
}
.nav-link:hover { color: var(--gold, #d4af37); }
.nav-link:hover::after { width: 100%; }
/* Metallic accents */
:root{ --rose:#8c1357; --gold:#d4af37; }
.btn-primary{ 
  background: linear-gradient(135deg, #7b0f4d, #b61a74, #7b0f4d); 
  color:#fff; 
  box-shadow: 0 8px 18px rgba(140,19,87,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-alt{ 
  background: linear-gradient(135deg, #8a6f13, #d4af37, #b8860b);
  color:#fff; 
  box-shadow: 0 8px 18px rgba(180,150,40,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-alt:hover{ filter: brightness(1.06); }
.nav-link:hover{ color: var(--gold); }
.nav-link::after{ background: linear-gradient(90deg, var(--rose), #b61a74, var(--gold)); }
a, a:visited { color: var(--rose); }
a:hover { color: var(--gold); }
/* --- Brand palette enforcement --- */
:root{ --rose:#8c1357; --gold:#d4af37; --ink:#3a3a3a; --gray:#6b7280; }
body{ color:var(--ink); }
a, a:visited{ color: var(--rose); }
a:hover{ color: var(--gold); }
:focus{ outline: 3px solid var(--gold); outline-offset: 2px; }
::selection{ background: rgba(212,175,55,.35); color: #111; }
.text-slate-700, .text-slate-500, .text-slate-600{ color: var(--gray) !important; }
.border-rose-100{ border-color: rgba(140,19,87,.20) !important; }
.hero{ background: radial-gradient(1000px 600px at -10% -10%, #ffd0e6 0, rgba(255,208,230,0) 45%), linear-gradient(180deg, #ffffff 0, #fff7fb 100%); }
header.sticky{
  background: linear-gradient(90deg, #d4af37, #f6d565, #ffd0e6, #f2a2c3) !important;
  backdrop-filter: blur(6px);
}
.illus-card{position:relative;}
.illus-soft-shadow{box-shadow:0 12px 40px rgba(30,10,50,.12);}
header img[alt="Casa La Esperanza"]{ display:inline-block; vertical-align:middle; }
@media (max-width: 767px){
  .hide-mobile{ display:none; }
}

/* Light (default) is your existing :root vars. Dark overrides below */
:root[data-theme="dark"]{
  --ink:#e5e7eb;             /* main text */
  --gray:#9aa1ab;            /* muted text */
  --rose:#f1a7cf;            /* brand accent lightened for dark */
  --gold:#e8c35a;            /* gold accent softened */
  --surface:#0f1115;         /* page bg */
  --panel:#151923;           /* card/header bg */
  --border:#242a36;          /* borders */
}

:root[data-theme="dark"] body{ background:var(--surface); color:var(--ink); }
:root[data-theme="dark"] header.sticky{
  background: linear-gradient(90deg, #1b1f2a, #222838) !important;
  color: var(--ink);
}
:root[data-theme="dark"] .divider{
  background: linear-gradient(90deg,var(--rose),var(--gold),#03b3ae);
}
:root[data-theme="dark"] .card{
  background: var(--panel);
  border-color: var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .hero{
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(255,208,230,.05) 0, rgba(255,208,230,0) 45%),
    linear-gradient(180deg, #0f1115 0, #0b0d12 100%);
}
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-500{ color: var(--gray) !important; }
:root[data-theme="dark"] .border-rose-100{ border-color: rgba(241,167,207,.25) !important; }

:root[data-theme="dark"] a, 
:root[data-theme="dark"] a:visited { color: var(--rose); }
:root[data-theme="dark"] a:hover { color: var(--gold); }

:root[data-theme="dark"] .btn-primary{
  background: linear-gradient(135deg, #8c1357, #b61a74, #8c1357);
  box-shadow: 0 8px 18px rgba(140,19,87,.35), inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff;
}
:root[data-theme="dark"] .btn-outline{
  border: 2px solid var(--rose);
  color: var(--rose);
  background: transparent;
}
:root[data-theme="dark"] .btn-outline:hover{
  background: var(--rose);
  color:#0f1115;
}
:root[data-theme="dark"] .btn-alt{
  background: linear-gradient(135deg, #806519, var(--gold), #a67c1b);
  color:#111;
}

:root[data-theme="dark"] .chip-rose{ background: rgba(241,167,207,.12); color: var(--rose); }

:root[data-theme="dark"] .nav-link{ color: var(--ink); }
:root[data-theme="dark"] .nav-link::after{
  background: linear-gradient(90deg, var(--rose), #b61a74, var(--gold));
}
/* Make Tailwind's light utilities play nice in dark mode */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-white\/85,
:root[data-theme="dark"] .bg-white\/80,
:root[data-theme="dark"] header.sticky,
:root[data-theme="dark"] .card {
  background-color: var(--panel) !important;
}

:root[data-theme="dark"] .border-white,
:root[data-theme="dark"] .border-2.border-white {
  border-color: var(--border) !important;
}

/* Inputs & textareas */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: #0f1115;          /* matches --surface */
  color: var(--ink);
  border-color: var(--border);
}

/* Make the header blur look right on dark */
:root[data-theme="dark"] header.sticky {
  background: rgba(21, 25, 35, 0.85) !important; /* dark translucent panel */
  backdrop-filter: blur(6px);
}

/* Optional: smoothen the flip */
* {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* Fix Tailwind translucent whites in dark */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-white\/85,
:root[data-theme="dark"] .bg-white\/80 {
  background-color: var(--panel) !important;
}

:root[data-theme="dark"] .border-white { border-color: var(--border) !important; }

/* Swap Tailwind gradient stops when dark */
:root[data-theme="dark"] .from-white{
  --tw-gradient-from: #0f1115 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 17 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
:root[data-theme="dark"] .to-white{
  --tw-gradient-to: #0b0d12 var(--tw-gradient-to-position);
}
:root[data-theme="dark"] .from-rose-50{
  --tw-gradient-from: rgba(241,167,207,.10) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(241,167,207,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
:root[data-theme="dark"] .to-rose-50{
  --tw-gradient-to: rgba(241,167,207,.08) var(--tw-gradient-to-position);
}

/* Header overlay in dark (beats the light gradient/white bg) */
:root[data-theme="dark"] header.sticky {
  background: rgba(21, 25, 35, 0.85) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Hero background already had a light gradient; force a dark one */
:root[data-theme="dark"] .hero{
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(241,167,207,.05) 0, rgba(241,167,207,0) 45%),
    linear-gradient(180deg, #0f1115 0, #0b0d12 100%);
}
/* Force white text for btn-alt in light mode */
:root:not([data-theme="dark"]) .btn-alt {
  color: #fff !important;
}
/* Light mode: white text on gold */
:root:not([data-theme="dark"]) .btn-alt {
  color: #fff !important;
}

/* Dark mode: black text on gold */
:root[data-theme="dark"] .btn-alt {
  color: #111 !important;
}