/**
 * Surf Shack — colour tokens.
 *
 * STAGE 1 of the plan in docs/visual-language.md. This file declares the tokens and
 * nothing consumes them yet, so shipping it changes not one pixel. That is the point:
 * it can go to production on its own, be verified as inert, and de-risk every stage
 * after it.
 *
 * MEASURED, 14 Aug 2026, across the plugin excluding build/:
 *   3,793 colour usages · 422 distinct values · the top 20 cover 64% of all usage.
 *
 * THE RULE FOR STAGE 2: values here are the EXISTING majority values, not the values
 * we would choose today. Replacing `#3d8d90` with `var(--ssx-brand)` where
 * `--ssx-brand: #3D8D90` is a pure refactor — the rendered pixels are identical and
 * any diff in a screenshot is a bug, which makes the sweep safe to verify. Changing
 * what a colour *is* happens later, in one place, once everything points here.
 *
 * NAMESPACE: `--ssx-`, not `--ssr-`.
 *
 * `--ssr-` is ALREADY in use inside the plugin — `--ssr-font`, `--ssr-ink`,
 * `--ssr-line`, `--ssr-ok`, `--ssr-warn` and others are declared in component
 * stylesheets. Four of them collided with names I had chosen. A global `:root`
 * declaration sharing a name with a component's own variable can silently change
 * that component's colour depending on scope — which is precisely the one thing
 * Stage 1 must not be able to do. A distinct prefix makes the collision impossible
 * rather than merely unlikely.
 *
 * Token names otherwise follow ivywild-orchestrator/docs/templates/kit.css where a
 * kit name exists for the job.
 *
 * @package SurfShack\Core
 */

:root{

  /* ---- brand ------------------------------------------------------------
   * NOTE: `--ssx-brand` is #3D8D90, the legacy teal, because that is what 352
   * declarations actually use. The LOGO teal is #52A3A4 — a ΔE of 8.3, plainly
   * different side by side. Reconciling the two is a Stage 3 decision; encoding
   * today's reality is a Stage 2 one. Do not "fix" this value during the sweep. */
  --ssx-brand:#3D8D90;          /* 352 uses */
  --ssx-brand-deep:#2C6E71;     /* 117, hovers, pressed states, dark rules */
  --ssx-mint:#CBE5DC;           /* 302, borders and input edges */
  --ssx-wash:#F3FAF7;           /* 95, panel tint */
  --ssx-wash-2:#E0F0F0;         /* 22 */

  /* ---- ink --------------------------------------------------------------- */
  --ssx-ink:#1F3E4A;            /* 316, body and headings */
  --ssx-ink-2:#4A6B7E;          /* 240, secondary text */
  --ssx-ink-muted:#7A8A92;      /* 127, hints, meta */
  --ssx-ink-muted-2:#6B7A88;    /* 23 */
  --ssx-ink-deep:#0B3D57;       /* 28 */
  --ssx-line:#EEF3F6;           /* 41, hairlines */
  --ssx-reversed:#FFFFFF;       /* 499, see the note below */

  /* ---- status ------------------------------------------------------------
   * ONE RED. Consolidated 14 Aug on Nick's call ("doesn't matter, just pick one").
   *
   * The audit found TWENTY-THREE red values across 141 usages — not the four the
   * first pass caught, because the first pass only looked at the top 20 by
   * frequency and the rest were long-tail singletons. Twenty-one of them are now
   * #B42318: the most-used value, and dark enough to work both ways — 6.57:1 as
   * text on white AND as a fill under white text, so one value serves a danger
   * label and a delete button without a second variant.
   *
   * DELIBERATELY NOT SWEPT: #E4572E and #A6331A. Those are `--coral` and its dark
   * pair in the F&B module — a brand accent and its error text on a coral-tinted
   * background, not the app's danger red. Folding them in would have broken a
   * coherent family to satisfy a count. */
  --ssx-danger:#B42318;         /* 21 values consolidated · 136 usages */
  --ssx-warn:#E8902A;           /* 33 */
  --ssx-warn-ink:#9A5A12;       /* 38 */
  --ssx-ok:#1B5E20;             /* 28 */
  --ssx-ok-wash:#E6F4EA;        /* 22 */

  /* ---- the marketing palette, for reference ------------------------------
   * These already live in ss-marketing.css scoped to `.ssm`. They are repeated
   * here as documentation of the two palettes' relationship, NOT to be consumed
   * globally — the app and the marketing pages are deliberately different
   * systems (Product vs Creative), and merging them is not a goal. */
  --ssx-logo-teal:#52A3A4;
  --ssx-logo-orange:#F59E57;
}

/*
 * WHITE IS DELIBERATELY NOT SWEPT.
 *
 * `#fff` is the single most common value (499 uses) and the least useful to
 * tokenise: it means "white" in every one of them, it will never change, and
 * `var(--ssx-reversed)` is longer, slower to read and no more meaningful. The
 * token exists for completeness where a rule genuinely means "reversed out",
 * but the Stage 2 sweep leaves plain `#fff` alone.
 */