/* THE BRAND, DEFINED ONCE — SESSION W.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THIS FILE IS THE ONLY PLACE IN THIS REPOSITORY WHERE A BRAND COLOUR IS A
 * NUMBER. Everywhere else — the three Tailwind themes, the three pages' own
 * <style> blocks, every inline style — the colour is `var(--sea)` or the
 * utility class that resolves to it. tests/brand-tokens.test.js scans the three
 * prototypes, the three generated stylesheets, the three theme configs and the
 * whole served bundle for the eight hexes below and fails if any of them
 * appears anywhere but here.
 *
 * WHY A SHARED FILE AND NOT A BLOCK IN EACH PAGE. The three apps already share
 * three JavaScript modules and a typeface through scripts/sla-targets.json, and
 * the same argument applies with more force to a colour: three copies of eight
 * hexes is three chances for one of them to be corrected in two places. It is
 * declared in the `assets` array of all three hosting targets, which is what
 * makes sync-sla.mjs copy it beside each index.html and what makes
 * verify-hosting-bundle.mjs check 4 refuse a deploy whose copy differs from the
 * repository's by a byte.
 *
 * IT IS NOT A FOURTH STYLESHEET IN THE SENSE THE THREE TAILWIND FILES ARE, and
 * that distinction is the whole reason merging those three is still forbidden.
 * This file declares VALUES. It generates no class. `--danger` existing here
 * does not make `text-danger` work on the booking page — that is decided by
 * tools/tailwind/customer.config.cjs, which does not name it, so Tailwind emits
 * no such rule into customer-tailwind.css. Three themes, three stylesheets, one
 * set of numbers underneath them.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHY EACH COLOUR IS DECLARED TWICE.
 *
 *     --token:     #RRGGBB;
 *     --token-rgb: R G B;
 *
 * (The shape, not a real token — tests/brand-tokens.test.js requires each of
 * the eight hexes to appear exactly ONCE in this file, comments included, and a
 * worked example here would be the second copy it exists to forbid.)
 *
 * The hex is the canonical, human form and the one the brand kit is written in.
 * The channel triple is what Tailwind needs: a theme colour written
 * `rgb(var(--sea-rgb) / <alpha-value>)` supports the opacity modifier, so
 * `bg-sea/10` is a real rule. Written as a bare `var(--sea)` it would not be —
 * Tailwind cannot take a hex apart at build time when it is behind a variable,
 * and the modifier is silently dropped. Three tints on the booking page depend
 * on this.
 *
 * THE TWO FORMS ARE PROVED TO AGREE, in tests/brand-tokens.test.js, by parsing
 * both out of this file and converting. A triple that drifts from its hex is
 * the exact failure this arrangement invites and the only one it adds.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THE TWO PAIRINGS THAT MAY NEVER SHIP. Both measure 3.87:1, which is below
 * WCAG AA's 4.5 for normal text.
 *
 *     sea text on a sand ground        sand text on a sea ground
 *
 * On `sand`, text is `slate`. On `sea`, text is `paper` or `onSea`.
 * tests/brand-contrast.test.js carries both as explicit failing cases, so the
 * measurement itself is proved rather than asserted.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* THE MARK'S PORTHOLE, PRIMARY BUTTONS, REVERSED PANELS. */
  --sea:     #43708A;
  --sea-rgb: 67 112 138;

  /* WARM PANELS, QUIET EMPHASIS, ACCENT BANDS. Text on it is `slate`, never
     `sea` and never `grey` — grey on sand is 4.15 and also fails. */
  --sand:     #EBD9BE;
  --sand-rgb: 235 217 190;

  /* ALL PRIMARY TEXT. */
  --slate:     #33454F;
  --slate-rgb: 51 69 79;

  /* PAGE GROUND. Cards stay white on top of it; that is what keeps `warn` at
     5.02 where it is printed, because warn on paper is 4.40 and would not
     pass. */
  --paper:     #F1F0EA;
  --paper-rgb: 241 240 234;

  /* SOFT TINT BLOCKS. Text on it is `slate`: grey on mist is 4.29. */
  --mist:     #D3E1E7;
  --mist-rgb: 211 225 231;

  /* SECONDARY TEXT. On `paper` and on white only — see the two notes above. */
  --grey:     #5C686E;
  --grey-rgb: 92 104 110;

  /* HAIRLINES AND BORDERS. Never text: rule on paper is 1.24. */
  --rule:     #DCD9CF;
  --rule-rgb: 220 217 207;

  /* BODY TEXT SITTING ON `sea`. */
  --onSea:     #EAF2F6;
  --onSea-rgb: 234 242 246;

  /* ── DERIVED, AND DELIBERATELY NOT A NINTH BRAND COLOUR ──────────────────
     `sea` darkened 18% toward black, which is what a hover and a pressed state
     need and what `accentDark` used to be. It is written out rather than left
     to color-mix() for one reason: Tailwind's opacity modifier needs channels,
     and a color-mix() result cannot be taken apart into them. It carries no
     brand meaning of its own, is never a ground for text other than `paper` or
     `onSea`, and must not be used where the kit says `sea`. */
  --seaDark:     #375C71;
  --seaDark-rgb: 55 92 113;

  /* ── STATUS, AND IT IS NOT THE BRAND ─────────────────────────────────────
     These four are here because a colour that is a number in two files is a
     colour that gets corrected in one of them, and for no other reason. THEY
     WERE NOT REPAINTED IN SESSION W AND MUST NOT BE: status colour is
     information. The dashboard's `unknown` state is amber with a warning sign
     because session M decided a reader must be able to tell "we do not know"
     from "we know and it is fine", and making that amber fit a warm palette
     would be repainting the meaning.

     `amber` and `warn` are the same hex under two names. That was true before
     this file existed; deduplicating them would rename a colour across a
     hundred class attributes for no rendering change, which is a different
     change from this one. */
  --warn:       #B45309;
  --warn-rgb:   180 83 9;
  --amber:      #B45309;
  --amber-rgb:  180 83 9;
  --danger:     #C0392B;
  --danger-rgb: 192 57 43;
  --good:       #0E8F86;
  --good-rgb:   14 143 134;
}