/* ============================================================
   Amari Head Spa — Brand Theme
   Minimal luxury clinical: white + near-black + warm nude beige.
   Loaded after Bootstrap so its overrides win.
   ============================================================ */

:root {
  --color-primary:          #111111;
  --color-background:       #ffffff;
  --color-background-soft:  #f7f4f1;
  --color-accent:           #c8aa98;
  --color-accent-dark:      #b39684;
  --color-accent-light:     #e6d7cf;
  --color-border:           #dedad7;
  --color-text-muted:       #666666;

  /* Map to Bootstrap 5 CSS vars so every component picks these up */
  --bs-primary:             #c8aa98;
  --bs-primary-rgb:         200, 170, 152;
  --bs-body-bg:             #ffffff;
  --bs-body-color:          #111111;
  --bs-secondary-bg:        #f7f4f1;
  --bs-tertiary-bg:         #f7f4f1;
  --bs-body-bg-rgb:         255, 255, 255;
  --bs-secondary-bg-rgb:    247, 244, 241;
  --bs-tertiary-bg-rgb:     247, 244, 241;
  --bs-border-color:        #dedad7;
  --bs-border-color-translucent: rgba(17, 17, 17, 0.08);
  --bs-secondary-color:     #666666;
  --bs-secondary-color-rgb: 102, 102, 102;
  --bs-link-color:          #111111;
  --bs-link-color-rgb:      17, 17, 17;
  --bs-link-hover-color:    #c8aa98;
  --bs-heading-color:       #111111;
}

body { background: var(--color-background); color: var(--color-primary); }

/* --- Typography ------------------------------------------------ */
body { font-family: 'Urbanist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: 'Urbanist', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; color: var(--color-primary); }
/* Elegant serif accent still available if a component asks for it */
.amari-serif { font-family: 'Urbanist', system-ui, sans-serif; font-weight: 500; font-style: italic; letter-spacing: -0.01em; }
.text-muted, .text-body-secondary { color: var(--color-text-muted) !important; }
.lead { color: var(--color-text-muted); }

/* --- Buttons -------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--color-accent-dark);
  --bs-btn-hover-border-color: var(--color-accent-dark);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--color-accent-dark);
  --bs-btn-active-border-color: var(--color-accent-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent);
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-hover-color: #ffffff;
}
.btn-dark {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
}
.btn-outline-dark {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: #ffffff;
}
.btn-light, .btn-outline-light {
  --bs-btn-color: var(--color-primary);
}

/* Pill CTA used in header + hero */
.btn-cta {
  background: var(--color-primary);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .2s;
}
.btn-cta:hover { background: #000; color: #ffffff; }

/* --- Navbar --------------------------------------------------- */
.navbar { background: var(--color-background) !important; border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 0 rgba(17,17,17,0.02); }
.navbar-brand img { max-height: 54px; width: auto; }
.navbar .nav-link { color: var(--color-primary); font-weight: 500; letter-spacing: 0.02em; }
.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--color-accent); }
.dropdown-menu {
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 40px -12px rgba(17,17,17,0.12);
  border-radius: 12px;
}

/* --- Cards / accordion --------------------------------------- */
.card { border: 1px solid var(--color-border); border-radius: 14px; }
.card-title { font-family: 'Urbanist', system-ui, sans-serif; }
.accordion { --bs-accordion-border-color: var(--color-border); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(200,170,152,0.2); --bs-accordion-active-color: var(--color-primary); --bs-accordion-active-bg: var(--color-background-soft); --bs-accordion-btn-color: var(--color-primary); }

/* --- Backgrounds --------------------------------------------- */
.bg-body-tertiary { background: var(--color-background-soft) !important; }
.bg-light         { background: var(--color-background-soft) !important; }
.bg-primary       { background: var(--color-accent) !important; }
.bg-dark          { background: var(--color-primary) !important; }
.text-primary     { color: var(--color-accent) !important; }
.border-primary   { border-color: var(--color-accent) !important; }

/* --- Forms --------------------------------------------------- */
.form-control, .form-select {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(200,170,152,0.18);
}

/* --- Badges -------------------------------------------------- */
.badge.bg-secondary { background: #f7f4f1 !important; color: #b39684 !important; border: 1px solid #e6d7cf; font-weight: 500; letter-spacing: 0.06em; }
.badge.bg-warning   { background: #f5d9b5 !important; color: #7a5c2e !important; }
.badge.bg-success   { background: #d9e9d1 !important; color: #3e5b32 !important; }
.badge.bg-primary   { background: #c8aa98 !important; color: #ffffff !important; }
.badge.bg-dark      { background: #111111 !important; color: #ffffff !important; }

/* --- Utility ------------------------------------------------- */
.amari-eyebrow {
  color: var(--color-accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
}