/* Light treatment for the booking pages.
   Loaded after style.css and booking.css, so redefining the tokens at :root
   re-themes every component that already uses them. Only the handful of rules
   with hard-coded dark values need overriding by hand below.

   Gold splits in two here. On black, one gold works for both text and fills.
   On white, #c9a84c as text is about 2:1 against the page — unreadable — so
   text uses a darker gold and fills keep the brighter one. */
:root {
  --bg:           #ffffff;
  --surface:      #faf9f7;
  --surface-2:    #f1efea;
  --fg:           #14140f;
  --muted:        #6a6a66;
  --muted-2:      #a3a099;
  --accent:       #8f6f1c;   /* text gold — ~5.4:1 on white */
  --accent-fill:  #c9a84c;   /* the original gold, for solid fills */
  --accent-light: #a8862f;
  --accent-dim:   rgba(201,168,76,0.16);
  --border:       rgba(143,111,28,0.34);
  --border-sub:   rgba(20,20,15,0.11);
}

body { background: var(--bg); color: var(--fg); }

/* Nav: the dark bar and blur belong to the black site. */
.nav.scrolled {
  background: rgba(255,255,255,0.94);
  border-bottom-color: var(--border-sub);
}
.nav-logo img { height: 22px; }

/* Solid gold fills keep dark text on top, whatever --bg is now. */
.btn-primary { background: var(--accent-fill); color: #14140f; }
.btn-primary:hover { filter: brightness(1.06); }
.bk-day.is-sel,
.bk-time.is-sel {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #14140f;
}
.bk-day.is-sel::after { background: #14140f; }

/* Panels sit on white, so they need an edge rather than a fill to read. */
.bk-panel,
.mg-card,
.mg-picker {
  background: var(--surface);
  border-color: var(--border-sub);
  box-shadow: 0 1px 2px rgba(20,20,15,0.04), 0 8px 28px rgba(20,20,15,0.05);
}
.bk-field input,
.bk-field textarea { background: #fff; }

/* Error and danger text was tuned for a dark ground and washes out on white. */
.bk-msg.is-error { color: #a33526; }
.mg-danger { color: #a33526; border-color: #c98275; }
.mg-danger:hover { background: #a33526; border-color: #a33526; color: #fff; }

.bk-footer { border-top-color: var(--border-sub); }
.bk-skeleton i { background: var(--surface-2); }

/* The step numbers and the tick were faint gold rules on black; on white they
   want the darker gold so the numeral is legible inside its box. */
.bk-expect li::before,
.bk-tick { border-color: var(--border); color: var(--accent); }

/* /consult — the hero's gold glow was tuned to bloom out of a black page.
   At the same strength on white it reads as a dirty smudge, so it's dialled
   right back to a warm tint that still separates the hero from the body. */
.c-hero {
  background: radial-gradient(64% 62% at 50% 0%, rgba(201,168,76,.16), transparent 72%);
}

/* /consult's own button predates the two-gold split: it paints --accent as a
   background, which is now the *text* gold. Readable, but a different button
   to the ones on the booking pages two clicks earlier. Same fill, same dark
   label, so the whole flow uses one button. */
.c-btn { background: var(--accent-fill); color: #14140f; }
.c-btn:hover { background: var(--accent-fill); filter: brightness(1.06); }