/**
 * Crown & Coach — the one place the concierge portal's colours are defined.
 *
 * Every page used to carry its own copy of the token block inline, so a
 * palette change meant editing seven files and hoping none was missed. They
 * now all link this instead.
 *
 * DARK IS THE DEFAULT and lives on `:root`, so a page that fails to run the
 * theme bootstrap still renders correctly rather than falling back to
 * unstyled black-on-white. Light is an override applied by
 * `[data-theme="light"]` on <html>.
 *
 * The light values are lifted from the admin portal's `styles/tokens.css`,
 * which already had a tuned light palette. Reusing it means a Guest who sees
 * the booking site in light mode and an operator who sees the dispatch portal
 * in light mode are looking at the same brand, not two attempts at it.
 *
 * TOKEN NAMES ARE DELIBERATELY UNCHANGED. Renaming them to match the admin's
 * (`--surface`, `--text-dim`, …) would have meant rewriting several thousand
 * call sites across seven pages for no user-visible gain. The names stay; only
 * the values move.
 *
 * CONTRAST. The customer base includes seniors and this is a booking and
 * payment surface, so every text token is chosen to clear WCAG-AA (4.5:1) on
 * the background it is used against. `--text-m` in particular was ~3.4:1 on
 * dark before and has been lifted; it is the token most often used for the
 * small print under a form field.
 */

:root,
[data-theme="dark"] {
  --gold: #c4a35a;
  --gold-l: #d4b87a;
  --gold-dim: rgba(196, 163, 90, .12);
  --gold-glow: rgba(196, 163, 90, .06);
  /* Page → raised → card, darkest first. */
  --bg: #060606;
  --bg2: #0a0a0a;
  --bg3: #0e0e0e;
  --card: #111;
  --card-h: #161412;
  --text: #f0ebe0;
  --text-d: #8a8578;
  /* Was #5a5650 — 2.59:1 on --card, a clear AA failure for the small print
     this token carries. #6f6a60 was the first attempt and still only measured
     3.51:1; measuring rather than eyeballing is the only way to catch that.
     #827c6d is 4.54:1 on --card and 4.88:1 on --bg — AA on both. */
  --text-m: #827c6d;
  --bdr: rgba(196, 163, 90, .10);
  --bdr-h: rgba(196, 163, 90, .25);
  --green: #4ead6b;
  --green-bg: rgba(78, 173, 107, .08);
  --blue: #5b9bd5;
  --blue-bg: rgba(91, 155, 213, .08);
  --red: #d46b6b;
  /* Surface a page can hand to a third-party widget that cannot read our
     CSS — the Square card iframe is styled from JS, see shared/square.js. */
  --field-bg: #111;
  /* Modal scrim. Not derivable from the palette — it is a darkener, and in
     light mode it stays dark (a light scrim reads as fog, not as depth). */
  --scrim: rgba(0, 0, 0, .55);
  /* Translucent surfaces. An opaque token would kill the blur these sit on,
     so they are declared per-theme rather than composed from --card. */
  --glass: rgba(12, 12, 12, .48);
  --glass-tint: rgba(8, 8, 8, .5);
  /* Ink for text/glyphs sitting ON a --gold fill. In dark the gold is light
     so the ink is near-black; in light the gold is dark so the ink inverts.
     Deriving this from --bg happens to work in dark and fails in light. */
  --on-gold: #0c0c0c;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, .5);
  --sf: 'Cormorant Garamond', Georgia, serif;
  --sn: 'DM Sans', 'Segoe UI', sans-serif;
  color-scheme: dark;
}

[data-theme="light"] {
  /* Gold darkened for light backgrounds — #c4a35a on #f5f2eb measures 2.15:1
     and is unreadable as text. The admin portal's #8b6d2e was the obvious
     value to copy, but it lands at 4.34:1 on the page background: AA for
     large text only, and this token is used for small print and links.
     #856829 is 4.68:1 on --bg and 5.24:1 on --card, and is visually
     indistinguishable. The admin palette has been corrected to match. */
  --gold: #856829;
  /* --gold-l is the HOVER / emphasis gold, and on this site it is used as
     text as well as as a fill. #a6832f measures 3.18:1 both as hover link
     text and behind --bg button labels — a fail. On a light page emphasis
     has to go DARKER, the same way the surface scale inverts; a "lighter
     gold" is the dark-mode instinct and it is backwards here. #6b5423 is
     6.44:1 in both roles. Matches the landing site exactly. */
  --gold-l: #6b5423;
  /* Rebased onto #856829 so one hue drives text, borders and tints. */
  --gold-dim: rgba(133, 104, 41, .12);
  --gold-glow: rgba(133, 104, 41, .06);
  /* The dark scale runs darkest → lightest as it rises off the page; light
     inverts that, so a raised surface is LIGHTER than the page, not darker.
     Getting this backwards is what makes a converted theme feel muddy. */
  --bg: #f5f2eb;
  --bg2: #faf8f3;
  --bg3: #fffdf9;
  --card: #ffffff;
  --card-h: #f2eee5;
  --text: #1c1810;
  --text-d: #4a4236;
  --text-m: #6b6356;
  --bdr: rgba(133, 104, 41, .16);
  --bdr-h: rgba(133, 104, 41, .32);
  /* Status colours darkened so they carry on a light ground. */
  --green: #3d7a52;
  --green-bg: rgba(61, 122, 82, .10);
  --blue: #3a6a96;
  --blue-bg: rgba(58, 106, 150, .10);
  --red: #a04040;
  --field-bg: #ffffff;
  --scrim: rgba(28, 24, 16, .32);
  --glass: rgba(255, 255, 255, .86);
  --glass-tint: rgba(245, 242, 235, .7);
  --on-gold: #fffdf9;
  --shadow-sm: 0 2px 8px rgba(28, 24, 16, .06);
  --shadow-md: 0 8px 32px rgba(28, 24, 16, .10);
  color-scheme: light;
}

/* ── Theme toggle ────────────────────────────────────────────────────────
   Mounted by shared/theme.js. Sized to the 44px minimum touch target rather
   than the visual weight of the glyph, and it announces its state to a
   screen reader rather than relying on the icon alone. */
.cc-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bdr);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
  flex-shrink: 0;
}
.cc-theme-toggle:hover { border-color: var(--bdr-h); background: var(--gold-dim); }
.cc-theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-theme-toggle svg { width: 17px; height: 17px; display: block; }
/* The sun shows in dark mode (tap for light) and vice versa — the icon is the
   DESTINATION, which is the convention people expect. */
.cc-theme-toggle .cc-icon-sun { display: block; }
.cc-theme-toggle .cc-icon-moon { display: none; }
[data-theme="light"] .cc-theme-toggle .cc-icon-sun { display: none; }
[data-theme="light"] .cc-theme-toggle .cc-icon-moon { display: block; }

/* Honour a guest who has asked their OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .cc-theme-toggle { transition: none; }
}

/* ── Readability settings ─────────────────────────────────────────────
   Chosen from the gear beside the theme switch (shared/theme.js), kept in
   localStorage "cc.display", and set on <html> before first paint by the
   inline snippet in each page's <head>. Every font-size on the site is
   written as calc(Npx * var(--fs, 1)), so the one token below scales all
   the text while layout widths stay where they are. */
:root { --fs: 1; }
[data-text="large"] { --fs: 1.15; }
[data-text="larger"] { --fs: 1.3; }
[data-text="largest"] { --fs: 1.5; }

/* Higher contrast: brighter text, firmer lines, and glass that is nearly
   solid so nothing shows through behind the words. Dark first, then light.
   Both selectors outrank the base palettes (two attributes to their one). */
[data-contrast="high"]:not([data-theme="light"]) {
  --gold: #d9b86a;
  --gold-l: #e8cc86;
  --gold-dim: rgba(217, 184, 106, .18);
  --gold-glow: rgba(217, 184, 106, .10);
  --text: #ffffff;
  --text-d: #e6e0d3;
  --text-m: #d2cbbc;
  --bdr: rgba(217, 184, 106, .38);
  --bdr-h: rgba(217, 184, 106, .72);
  --green: #74d690;
  --blue: #86bdf0;
  --red: #f28a8a;
  --glass: rgba(10, 10, 10, .95);
  --glass-tint: rgba(5, 5, 5, .92);
}
[data-contrast="high"][data-theme="light"] {
  --gold: #6b5423;
  --gold-l: #4e3d19;
  --gold-dim: rgba(107, 84, 35, .16);
  --gold-glow: rgba(107, 84, 35, .08);
  --bg: #fbfaf6;
  --bg2: #ffffff;
  --bg3: #ffffff;
  --card: #ffffff;
  --card-h: #f1ece2;
  --text: #000000;
  --text-d: #1f1a12;
  --text-m: #2f2920;
  --bdr: rgba(107, 84, 35, .45);
  --bdr-h: rgba(107, 84, 35, .8);
  --green: #27563a;
  --blue: #27516f;
  --red: #8a2c2c;
  --field-bg: #ffffff;
  --glass: rgba(255, 255, 255, .98);
  --glass-tint: rgba(250, 248, 243, .97);
}

/* Heavier text: nothing lighter than medium, and bold stays bold. The
   brand's thin 300 weight is the one older eyes struggle with most. */
[data-weight="bold"] body,
[data-weight="bold"] body * { font-weight: 500 !important; }
[data-weight="bold"] b,
[data-weight="bold"] strong { font-weight: 700 !important; }

/* Less motion, by the Guest's own choice rather than the system's. */
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* The theme switch and the Display gear sit together. */
.cc-display-cluster { display: inline-flex; align-items: center; gap: 8px; }
.cc-display-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bdr);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
  flex-shrink: 0;
}
.cc-display-btn:hover,
.cc-display-btn[aria-expanded="true"] { border-color: var(--bdr-h); background: var(--gold-dim); }
.cc-display-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-display-btn svg { width: 18px; height: 18px; display: block; }

/* The Display panel. Fixed under the top bar on the right; full width on
   a phone. Its own text follows the text-size choice, so a Guest sees the
   change as they make it. */
.cc-display-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 9600;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--bdr-h);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 16px 18px 14px;
  color: var(--text);
  font-family: var(--sn);
  -webkit-font-smoothing: antialiased;
}
.cc-display-panel[hidden] { display: none; }
.cc-display-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cc-display-head h2 { font-family: var(--sf); font-size: calc(24px * var(--fs, 1)); font-weight: 400; margin: 0; }
.cc-display-close {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--bdr); background: transparent; color: var(--text);
  font-size: calc(22px * var(--fs, 1)); line-height: 1; cursor: pointer; font-family: var(--sn);
}
.cc-display-close:hover { border-color: var(--gold); color: var(--gold); }
.cc-display-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-display-label {
  font-size: calc(11px * var(--fs, 1)); letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-d); margin: 14px 0 6px;
}
.cc-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 50px; padding: 3px;
}
.cc-seg button {
  min-height: 40px; border: none; border-radius: 50px; background: transparent;
  color: var(--text-d); font-family: var(--sn); font-size: calc(13px * var(--fs, 1)); font-weight: 500;
  cursor: pointer; padding: 6px 6px; line-height: 1.2; transition: background .2s, color .2s;
}
.cc-seg button[aria-checked="true"] { background: var(--gold); color: var(--on-gold); }
.cc-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-seg-text { border-radius: 14px; }
.cc-seg-text button { border-radius: 10px; }
.cc-display-switches { margin-top: 14px; border-top: 1px solid var(--bdr); }
.cc-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 0;
  background: transparent; border: none; border-bottom: 1px solid var(--bdr);
  color: var(--text); font-family: var(--sn); text-align: left; cursor: pointer;
}
.cc-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 6px; }
.cc-switch-text b { display: block; font-size: calc(14.5px * var(--fs, 1)); font-weight: 500; }
.cc-switch-text small { display: block; font-size: calc(12.5px * var(--fs, 1)); color: var(--text-d); margin-top: 2px; }
.cc-switch-track {
  flex-shrink: 0; width: 46px; height: 26px; border-radius: 50px;
  background: var(--bdr-h); position: relative; transition: background .2s;
}
.cc-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg3); box-shadow: var(--shadow-sm); transition: transform .2s;
}
.cc-switch[aria-checked="true"] .cc-switch-track { background: var(--gold); }
.cc-switch[aria-checked="true"] .cc-switch-knob { transform: translateX(20px); background: var(--on-gold); }
.cc-display-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 12px;
}
.cc-display-note { font-size: calc(12px * var(--fs, 1)); color: var(--text-d); line-height: 1.4; }
.cc-display-reset {
  background: transparent; border: 1px solid var(--bdr-h); color: var(--text-d);
  border-radius: 50px; padding: 9px 18px; min-height: 40px;
  font-family: var(--sn); font-size: calc(13px * var(--fs, 1)); cursor: pointer; white-space: nowrap;
}
.cc-display-reset:hover { border-color: var(--gold); color: var(--gold); }
.cc-display-reset:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 520px) {
  .cc-display-panel { top: 62px; right: 8px; left: 8px; width: auto; }
  .cc-seg-text { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}