/* Shared finishing layer for the supplied ivory / sage design.
   Keep page geometry, application states, hidden controls and script hooks intact. */
:root {
  --showcase-ivory: #f6f1e8;
  --showcase-sage: #46553b;
  --showcase-ink: #24271f;
  --showcase-muted: #737662;
  --showcase-line: #cfcebc;
  --showcase-terra: #bb7659;
  --showcase-surface: #fcf8f0;
  --showcase-soft: #e9eadc;
  --showcase-field: #fffdf8;
  --showcase-hover: #303f29;
  /* The reference muted colour is reserved for decoration and large type.
     Small labels use a darker related tone for contrast on ivory. */
  --showcase-muted-text: #626a55;
  --paper: var(--showcase-ivory);
  --ink: var(--showcase-ink);
  --muted: var(--showcase-muted-text);
  --line: var(--showcase-line);
}
body { background-color: var(--showcase-ivory); color: var(--showcase-ink); }
::selection { background: #d6ddc5; color: var(--showcase-ink); }

/* Existing logo and navigation, including persistent customer access on phones. */
.site-header {
  background: var(--showcase-ivory);
  border-color: var(--showcase-line);
  color: var(--showcase-ink);
}
.site-header .wordmark img { object-fit: contain; filter: none; }
.site-header .desktop-nav a,
.site-header .header-account { font-family: var(--font-ui, DM, Arial, sans-serif); }
.site-header .desktop-nav a:hover,
.site-header .desktop-nav a[aria-current="page"],
.site-header .header-account:hover,
.site-header .header-account[aria-current="page"] { color: var(--showcase-sage); }
.site-header .header-cta {
  border-color: var(--showcase-sage);
  border-radius: 999px;
  background: var(--showcase-sage);
  color: var(--showcase-ivory);
  font-weight: 550;
  box-shadow: 0 3px 5px #2c352118;
}
.site-header .header-cta:hover { background: var(--showcase-hover); border-color: var(--showcase-hover); color: var(--showcase-ivory); }
.site-header .mobile-menu summary { color: var(--showcase-sage); }
.site-header .mobile-menu nav { background: var(--showcase-ivory); border-color: var(--showcase-line); box-shadow: 0 12px 20px #24271f0d; }
.site-header .mobile-menu nav a { color: var(--showcase-ink); border-color: var(--showcase-line); }
.site-header .mobile-menu nav a:hover,
.site-header .mobile-menu nav a[aria-current="page"] { color: var(--showcase-sage); }
.site-header :is(a, summary):focus-visible,
.site-footer a:focus-visible { outline-color: var(--showcase-sage); }

/* The shared footer adopts the light prototype finish, preserving its content. */
.site-footer { background: var(--showcase-ivory); color: var(--showcase-ink); border-top: 1px solid var(--showcase-line); }
.site-footer .footer-top p,
.site-footer .footer-top em { color: var(--showcase-sage); }
.site-footer .footer-top a { border-color: #8d967c; color: var(--showcase-sage); }
.site-footer .footer-top a:hover { background: var(--showcase-soft); }
.site-footer .footer-links .eyebrow { color: var(--showcase-sage); opacity: 1; }
.site-footer .footer-links a:hover,
.site-footer .footer-bottom a:hover { color: var(--showcase-sage); }
.site-footer .footer-bottom { border-color: var(--showcase-line); }
.site-footer .footer-bottom img { filter: none; }
.site-footer .footer-bottom > span { color: var(--showcase-muted-text); }

/* Public detail pages retain their editorial structure and live catalogue. */
.source-content { --content-accent: var(--showcase-sage); }
.source-content :is(.page-top, .ulc-hero) { background: #eeeade; border-color: var(--showcase-line); }
.source-content :is(.rose, .ulc-section-soft, .privacy-scope, .booking-handoff) { background: var(--showcase-soft); border-color: var(--showcase-line); }
.source-content :is(h1, h2, h3, h4) { font-family: var(--font-editorial, Newsreader, Georgia, serif); }
.source-content :is(h1, h2) em { color: var(--showcase-sage); }
.source-content :is(.lead, .lede, .ulc-lead, .ulc-sub) { color: var(--showcase-muted-text); }
.source-content :is(.btn, .ulc-btn, .booking-external),
.migrated-main > .source-content .button {
  border-radius: 999px;
  border-color: var(--showcase-sage);
  color: var(--showcase-sage);
}
.source-content :is(.btn-gold, .btn-plum, .ulc-btn-gold, .ulc-btn-dark, .booking-external),
.migrated-main > .source-content .button-ink { background: var(--showcase-sage); color: var(--showcase-ivory); }
.source-content :is(.btn, .ulc-btn, .booking-external):hover,
.migrated-main > .source-content .button:hover { background: var(--showcase-hover); border-color: var(--showcase-hover); color: var(--showcase-ivory); }
.source-content :is(.tdir-card, .ulc-card, .ulc-faq, .ulc-fact) { border-color: var(--showcase-line); }
.source-content :is(.tdir-card img, .ulc-gallery img) { border-radius: 16px; }
.clinic-catalogue { color: var(--showcase-ink); background: var(--showcase-soft); }
.clinic-catalogue .catalogue-card { background: var(--showcase-surface); border-color: var(--showcase-line); border-radius: 12px; }
.clinic-catalogue :is(.catalogue-price, .catalogue-availability, .catalogue-status, dt) { color: var(--showcase-muted-text); }
.clinic-catalogue a,
.catalogue-shortcut a { color: var(--showcase-sage); }
.clinic-catalogue .catalogue-book,
.clinic-catalogue .catalogue-error button:not(:disabled) { background: var(--showcase-sage); border-color: var(--showcase-sage); color: var(--showcase-ivory); border-radius: 999px; }
.clinic-catalogue .catalogue-book:hover,
.clinic-catalogue .catalogue-error button:hover:not(:disabled) { background: var(--showcase-hover); border-color: var(--showcase-hover); color: var(--showcase-ivory); }
.clinic-catalogue :is(input, select) { background: var(--showcase-field); border-radius: 8px; }
.clinic-catalogue :is(a, button, input, select, summary):focus-visible { outline-color: var(--showcase-sage); }

/* Application foundations: leave error/warning accents and status badges alone. */
.booking-page { --booking-ink: var(--showcase-ink); --booking-muted: var(--showcase-muted-text); --booking-line: var(--showcase-line); }
.customer-page { --customer-ink: var(--showcase-ink); --customer-muted: var(--showcase-muted-text); --customer-line: var(--showcase-line); }
.staff-page { --staff-ink: var(--showcase-ink); --staff-muted: var(--showcase-muted-text); --staff-line: var(--showcase-line); }
.visit-page { --visit-ink: var(--showcase-ink); --visit-muted: var(--showcase-muted-text); --visit-line: var(--showcase-line); }
.booking-page :is(input, select):not(:disabled):not([aria-invalid="true"]),
.customer-page :is(input:not([type="checkbox"]), textarea):not(:disabled):not([aria-invalid="true"]),
.staff-page :is(input:not([type="checkbox"]), select):not(:disabled):not([aria-invalid="true"]),
.visit-page :is(input:not([type="checkbox"]), select, textarea):not(:disabled):not([aria-invalid="true"]) {
  background: var(--showcase-field);
  border-color: #8d967c;
  border-radius: 8px;
  color: var(--showcase-ink);
}
.booking-page :is(a, button, input, select):focus-visible,
.customer-page :is(a, button, input, textarea, summary):focus-visible,
.staff-page :is(a, button, input, select):focus-visible,
.visit-page :is(a, button, input, select, textarea):focus-visible { outline-color: var(--showcase-sage); }
.booking-page .booking-button,
.customer-page .customer-button,
.staff-page .staff-button,
.visit-page .visit-button { border-radius: 999px; }
.booking-page .booking-button-primary:not(:disabled),
.customer-page .customer-button:not(.customer-secondary):not(:disabled),
.staff-page .staff-button:not(.staff-button-secondary):not(:disabled),
.staff-page .staff-settings-actions .staff-button:first-child:not(:disabled),
.visit-page .visit-button:not(.visit-secondary):not(:disabled) {
  background: var(--showcase-sage);
  border-color: var(--showcase-sage);
  color: var(--showcase-ivory);
}
.booking-page .booking-button-primary:hover:not(:disabled),
.customer-page .customer-button:not(.customer-secondary):hover:not(:disabled),
.staff-page .staff-button:not(.staff-button-secondary):hover:not(:disabled),
.staff-page .staff-settings-actions .staff-button:first-child:hover:not(:disabled),
.visit-page .visit-button:not(.visit-secondary):hover:not(:disabled) {
  background: var(--showcase-hover);
  border-color: var(--showcase-hover);
  color: var(--showcase-ivory);
}
.customer-page .customer-secondary:not(:disabled),
.staff-page .staff-button-secondary:not(:disabled),
.visit-page .visit-secondary:not(:disabled) { background: transparent; border-color: #8d967c; color: var(--showcase-sage); }
.customer-page .customer-secondary:hover:not(:disabled),
.staff-page .staff-button-secondary:hover:not(:disabled),
.visit-page .visit-secondary:hover:not(:disabled),
.booking-page .booking-button-secondary:hover:not(:disabled) { background: var(--showcase-soft); border-color: #8d967c; color: var(--showcase-sage); }
.staff-page .staff-navigation [aria-current="page"]:not(:disabled),
.staff-page .staff-booking-tabs [aria-pressed="true"]:not(:disabled) { background: var(--showcase-sage); border-color: var(--showcase-sage); color: var(--showcase-ivory); }
.customer-page .customer-text-button,
.customer-page .customer-code-settings summary,
.visit-page .visit-text-button { color: var(--showcase-sage); }
.customer-page .customer-switch button[aria-pressed="true"] { color: var(--showcase-sage); border-color: var(--showcase-sage); }
.customer-page .customer-check input,
.staff-page .staff-booking-check input { accent-color: var(--showcase-sage); }

/* Rounded warm surfaces, without changing grids, padding or semantic notices. */
.customer-page .customer-card,
.customer-page .account-card,
.customer-page .account-contact,
.staff-page :is(.staff-invite-form, .staff-team-card, .staff-settings-form, .staff-booking-stat, .staff-booking-editor, .staff-booking-change-card) {
  background: var(--showcase-surface);
  border-color: var(--showcase-line);
  border-radius: 14px;
}
.customer-page .customer-visit-links a { background: var(--showcase-soft); border-color: var(--showcase-line); border-radius: 16px; }
.customer-page .customer-visit-links a:hover { color: var(--showcase-sage); border-color: #8d967c; }
.customer-page .account-dashboard { color: var(--showcase-ink); border-color: var(--showcase-line); }
.customer-page .account-dashboard :is(h2, h3) { font-family: var(--font-editorial, Newsreader, Georgia, serif); }
.customer-page .account-review { background: var(--showcase-soft); border-radius: 10px; }
.customer-page .account-action,
.customer-page .account-card-heading { border-color: var(--showcase-line); }
.customer-page .account-empty,
.staff-page .staff-empty { background: #ecebdf; border-color: var(--showcase-line); border-radius: 12px; color: var(--showcase-muted-text); }

/* Keep all three header actions available within the existing mobile layout. */
@media (max-width:760px) {
  .site-header:has(.header-account) { gap: 9px; }
  .site-header .header-cta { gap: 9px; padding-inline: 13px; }
  .site-header .mobile-menu summary { min-height: 44px; }
  .staff-page .staff-table tbody tr { background: var(--showcase-surface); border-color: var(--showcase-line); border-radius: 14px; }
}
@media (max-width:370px) {
  .site-header:has(.header-account) { padding-inline: 12px; gap: 6px; }
  .site-header:has(.header-account) .wordmark,
  .site-header:has(.header-account) .wordmark img { width: 88px; }
  .site-header:has(.header-account) .header-account { font-size: 11px; min-width: 40px; min-height: 44px; }
  .site-header:has(.header-account) .header-cta { font-size: 11px; padding-inline: 9px; gap: 6px; min-height: 44px; }
  .site-header .mobile-menu summary { font-size: 11px; gap: 5px; }
}