/**
 * booking-panel-tokens.css — candidate-only bridge + scoped overrides, NOT
 * part of the accepted sibling booking-panel.css file (which stays copied
 * verbatim, byte-identical, unedited).
 *
 * booking-panel.js's own CSS was authored assuming a LIGHT cream card
 * ("--ek-cream" panel background, "--ek-graphite" dark text) — a light-theme
 * card. The real EK site is dark throughout: near-black --bg, cream --chalk
 * text, a light warm --brass gold used with DARK text on top of it (see the
 * real .button rule in design.css: background:var(--brass); color:#20211c).
 * A literal name-for-name token mapping (graphite->bg, cream->chalk) would
 * keep the panel light-on-dark-site and would put light --chalk text on the
 * light --brass buttons — exactly the failing contrast the controller found.
 *
 * So the two roles are intentionally SWAPPED here: --ek-cream (the panel's
 * own background token) resolves to the real site's dark --bg, and
 * --ek-graphite (the panel's own text token) resolves to the real site's
 * light --chalk. That alone turns the whole card dark-with-light-text,
 * matching the site's actual material.
 *
 * A few rules inside booking-panel.css are hardcoded (not token-driven) and
 * were tuned for that original light card — a semi-white section/button/slot
 * fill and a near-invisible dark-on-dark border. Those few are corrected
 * below by loading this stylesheet AFTER booking-panel.css in the HTML, so
 * these same-specificity `.ekwb*` rules win the normal cascade — no
 * `!important`, no edit to the accepted file's bytes, no behaviour change.
 *
 * correction-02: an EARLIER version of this comment claimed the token swap
 * alone "fixes the primary button automatically, no separate override
 * needed" — traced against the ACTUAL rendered cascade (getComputedStyle
 * inside a real integrated page, not the variables alone), that claim was
 * wrong. `.ekwb__button` and `.ekwb__button--primary` are both single-class
 * selectors of equal specificity; the generic `.ekwb__button` override two
 * blocks below (needed to fix the OTHER, secondary buttons' hardcoded
 * semi-white fill) loads after booking-panel.css's own `.ekwb__button--primary`
 * rule and was silently winning the `background` property on primary buttons
 * too — leaving the confirm/declare/stale-offer primary action rendered with
 * near-black text on a near-black background, exactly the defect the
 * controller found reading SYNTHETIC-enabled-confirm-mobile390.png. Fixed by
 * scoping the secondary-button override to exclude `--primary`, and by
 * giving the primary button its own explicit, deliberate rule below — the
 * real site's own literal palette pair (brass background, #20211c near-black
 * text — see design.css's `.button` rule), not a value derived through the
 * swapped tokens, so there is no cascade ambiguity left to accidentally win
 * over it again. Computed-style contrast verified (see correction-02
 * report): 8.03:1 for the enabled primary button.
 */
:root {
  --ek-graphite: var(--chalk, #ece8db);
  --ek-graphite-soft: var(--muted, #b9b4a4);
  --ek-cream: var(--bg, #1c1d1a);
  --ek-cream-deep: var(--panel, #282a25);
  --ek-gold: var(--brass, #ccb480);
  --ek-gold-soft: rgba(204, 180, 128, 0.35);
  /* booking-panel.css falls back to a dark brick-red tuned for light
   * backgrounds; the real site's own error copy uses this lighter coral on
   * its dark background (design.css .form-error) — reused, not invented. */
  --ek-danger: #f1c9b3;
}

/* ---- Scoped overrides for the handful of hardcoded (non-token) surfaces -- */
.ekwb__section,
.ekwb__slot {
  background: rgba(236, 232, 219, 0.06);
  border-color: rgba(236, 232, 219, 0.16);
}
.ekwb__input,
.ekwb__select {
  border-color: rgba(236, 232, 219, 0.24);
}
/* Secondary buttons only ("Choose a different time", "Edit my details", "Try again", etc.) —
 * explicitly excludes --primary so it can never again win that property on the primary action
 * (see the correction-02 note above). */
.ekwb__button:not(.ekwb__button--primary) {
  background: rgba(236, 232, 219, 0.07);
  border-color: rgba(236, 232, 219, 0.24);
  color: var(--ek-graphite);
}

/* The one primary action button (declare/confirm/stale-offer "See available times" /
 * "Confirm <slot>" / "Show current times"). Explicit, literal, real-site palette pair — not
 * derived through the swapped --ek-cream/--ek-graphite tokens above, so nothing else in this
 * cascade can accidentally repaint it. Verified computed-style contrast 8.03:1 (>= 4.5:1). */
.ekwb__button--primary {
  background: var(--ek-gold);
  border-color: var(--ek-gold);
  color: #20211c;
}
/* Disabled is intentionally softer, not accidentally illegible: booking-panel.css's own
 * `.ekwb__button:disabled{opacity:.6}` composites this same pair down to ~3.8:1 against the
 * card surface — WCAG 1.4.3 does not require contrast for disabled controls, and this remains
 * clearly readable as a deliberately de-emphasised, non-interactive state. */

/* correction-02: the rule above is not the whole story. The site has its own global, unrelated
 * hover style for every <button> (motion.css, traced with Chrome DevTools Protocol
 * CSS.getMatchedStylesForNode against the real running page, not guessed from source text):
 *   :root body :is(button, .button, .desktop-cta, .card-arrow):not(:disabled):hover
 *     { color: #fffdf3 }
 * That selector's specificity — (0 IDs, 3 classes/pseudo-classes, 2 types) — beats a plain
 * `.ekwb__button--primary` (0,1,0) regardless of stylesheet order, so simply hovering the mouse
 * over this button (an entirely ordinary thing to do right before clicking it) repainted its
 * text near-white on gold: the exact defect the controller read in
 * SYNTHETIC-enabled-confirm-mobile390.png. `!important` is the correct, narrow tool for
 * outranking a selector this specific without writing an equally convoluted compound selector
 * for no real benefit — scoped to exactly this one declaration, on exactly this one button, not
 * used anywhere else in this file, and does not touch the global rule itself (no edit to
 * motion.css, no change to any other button on the site). */
.ekwb__button--primary:hover {
  color: #20211c !important;
}

/* ---- Calm reading size: 18px body, 17px at phone widths ---- */
.ekwb {
  font-size: 18px;
}
@media (max-width: 390px) {
  .ekwb {
    font-size: 17px;
  }
}