/*
 * OpusBookings platform theme.
 *
 * The single source of truth for the colour of every PLATFORM page — the root
 * site, sign-in, the operator dashboard and settings, the admin console, and
 * the guest booking pages. Each of those used to carry its own copy of these
 * variables, which is how six pages end up six slightly different shades of
 * the same colour.
 *
 * NOT used by public/operator.html. That template is themed per operator from
 * themes.js, so an operator's landing page carries their brand rather than
 * the platform's.
 *
 * The palette matches the "ocean" preset in themes.js, so the platform's own
 * pages and an operator who picks Ocean stay in step.
 */

:root {
  /* Page and card surfaces */
  --ground: #0E1B2A;        /* page background */
  --ground-soft: #16283C;   /* raised panels on the dark ground */
  --paper: #EDF3F8;         /* card background */
  --paper-dim: #A8BACB;     /* muted text on the dark ground */

  /* Text */
  --ink: #152736;           /* text on paper */
  --ink-soft: #4A5F72;      /* secondary text on paper */

  /* Brand. Named --teal and --brass for continuity with the markup these
     pages already had; they are the primary and accent slots. */
  --teal: #1A6FB5;          /* buttons, links, prices */
  --teal-hover: #15598F;
  --teal-soft: #DCEAF6;     /* success banners, selected states */
  --brass: #4FA9E8;         /* accents, ratings, badges */
  --brass-soft: #DCEDFA;    /* warning banners */

  /* Status */
  --rust: #A63D2F;          /* errors, destructive actions */
  --rust-soft: #F3DCD6;

  /* Hairlines. Derived from the ink and paper above so a palette change
     doesn't leave green-tinted borders behind on a blue page. */
  --line: rgba(21, 39, 54, 0.12);
  --line-strong: rgba(21, 39, 54, 0.2);
  --line-light: rgba(237, 243, 248, 0.18);
  --line-light-strong: rgba(237, 243, 248, 0.32);
}

/* --- platform wordmark ---------------------------------------------------
 * Shared by the root page and sign-in. The logo is admin-supplied and may not
 * exist yet; pages set .logo-missing on error so the text wordmark stands on
 * its own rather than leaving a broken-image icon.
 */

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--paper);
  text-decoration: none;
}

.wordmark img {
  height: 34px;
  width: auto;
  max-width: 170px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Fallback only. The primary artwork is drawn for a light background — its
   darkest ink measures 1.23:1 against --ground, well under the 3:1 floor for
   graphics — so on dark chrome it needs a light surface under it. Applied by
   platform-brand.js ONLY when no reverse logo is configured; with one, the
   reverse asset is used and no chip appears. */
img.logo-chip {
  background: var(--paper);
  border-radius: 5px;
  padding: 5px 8px;
  box-sizing: content-box;
}

/* An <img> that failed to load hides itself rather than showing a broken
   icon. Pages set this from an onerror handler; platform-brand.js clears it
   again only on a successful load. Deliberately not scoped to .wordmark — the
   dashboard and booking pages use it on their own logos too. */
img.logo-missing { display: none; }

/* A full lockup already contains the name and tagline, so when one loads it IS
   the wordmark — repeating it as text beside the image reads as a mistake. An
   icon-only mark (.logo-mark, set from the image's proportions) is the opposite
   case: it needs the name beside it. */
.wordmark img:not(.logo-missing):not(.logo-mark) + .wordmark-text { display: none; }

/* A square mark sits smaller than a wide lockup at the same visual weight. */
.wordmark img.logo-mark { height: 32px; max-width: 32px; }

.wordmark-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.wm-a { color: var(--paper); }
.wm-b { color: var(--brass); }

/* On a light card the wordmark has to invert, or it disappears. */
.card .wm-a,
.panel .wm-a { color: var(--ink); }

.wordmark-tagline {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-top: 3px;
}