/* ===== CROSSROADS UI — mini-site: what the library does not express =====
 *
 * The dependency runs one way (`docs/ARCHITECTURE_DECISIONS.md` §Token
 * architecture): `src/tokens/` is the source of truth, and the mini-site is a
 * downstream consumer like any other product. So the site consumes the library
 * directly — `css/library-color.css` and `css/library-tokens.css` are the
 * library's own files, copied in at build time — and this file carries only
 * what the library does not express.
 *
 * Two things used to live here and no longer do: ~40 aliases translating the
 * library's role vocabulary into an older Material-ish dialect, and a
 * hand-typed copy of radius, spacing, type, motion and elevation. Both were
 * consumer-owned copies of tokens the library already ships, so the site was
 * renamed onto the library's names instead of keeping the fork. That is F-9 and
 * F-11 in `docs/DEFECT_LOG.md` executed; CR-D-031 is what the copy cost while it
 * lasted — `--cr-space-5` resolved to 18px here against the library's 20px, and
 * no gate could see it, because a gate can only compare what both sides name.
 *
 * Every declaration below is `--cr-site-*`, and that prefix is the contract:
 * `scripts/audit-site-token-bridge.mjs` fails on any other name. A library name
 * declared here would redefine a contract every consumer reads; a new name
 * holding `var(--cr-color-…)` and nothing else is a library token wearing a
 * local alias, which is the drift this file was built out of. What the site
 * genuinely needs and the library cannot express is added here AND filed as a
 * change request — a site-owned token with no request behind it is a fork
 * nobody agreed to. The three open ones are numbered on the blocks below,
 * without a leading hash: a three-digit issue number written that way is a
 * valid CSS hex colour, and `audit-site-color-usage.mjs` reads it as one.
 *
 * Load order: library-color.css, then library-tokens.css, then this file.
 * Everything here is `.cr`-scoped (0,1,0) or higher, so it layers predictably.
 */
.cr {
  /* --- surface ladder — change request 204: five distinct neutral steps ---
   *
   * The library exposes two distinct surface tints per theme (`subtle` and
   * `overlay` collapse onto the same two neutrals in light), which is not
   * enough separation for a rail, a segmented control and a switch track to
   * read apart on one page. These four are the tinted steps ABOVE the library's
   * own `--cr-color-surface-default`, which the site uses directly as the base
   * of the ladder rather than aliasing. They are mixed from `text-primary` into
   * `surface-default` — both of which already flip per theme, which keeps the
   * ladder monotonic in light AND dark instead of inverting the way a fixed
   * ramp step would.
   */
  --cr-site-surface-tint-1: color-mix(in srgb, var(--cr-color-text-primary) 4%, var(--cr-color-surface-default));
  --cr-site-surface-tint-2: color-mix(in srgb, var(--cr-color-text-primary) 6%, var(--cr-color-surface-default));
  --cr-site-surface-tint-3: color-mix(in srgb, var(--cr-color-text-primary) 9%, var(--cr-color-surface-default));
  --cr-site-surface-tint-4: color-mix(in srgb, var(--cr-color-text-primary) 15%, var(--cr-color-surface-default));

  /* --- hairline — change request 205: a divider softer than the library's ---
   * `--cr-color-border-divider` is tuned for component chrome and reads too
   * hard across the large flat surfaces a marketing page is mostly made of. */
  --cr-site-hairline: color-mix(in srgb, var(--cr-color-text-primary) 9%, transparent);

  /* --- hover direction — change request 206: hover keyed to contrast, not theme ---
   *
   * A hover FILL must move away from the label sitting on it, so the deciding
   * factor is the palette's on-fill colour, NOT the theme. Most schemes
   * (including every light theme, and warm dark) put white on the tertiary
   * fill, so darkening is correct; only a scheme with a near-black on-fill
   * needs to lighten, and that case is overridden below. Keying this to the
   * theme instead measured 3.44:1 on warm/dark.
   *
   * The library ships `-fill-hover` as a single direction, which is why these
   * are here rather than consumed.
   */
  --cr-site-tertiary-hover: var(--cr-color-action-tertiary-text);
  /* Link TEXT is the opposite case — it sits on the page background, so it
     does follow the theme: darker on light, lighter on dark. */
  --cr-site-primary-hover: var(--cr-color-action-primary-text);

  /* --- brand mark: product artwork, re-tuned to the active palette ---
   * Not a design-system concern and not a change request: the library has no
   * opinion about this product's logo. */
  --cr-site-brand-mark-1: #8C4A63;
  --cr-site-brand-mark-2: #A74257;
  --cr-site-brand-mark-3: #B0654F;
}

.cr[data-theme="dark"] {
  --cr-site-primary-hover: var(--cr-color-action-primary-fill-hover);
  --cr-site-brand-mark-1: #B0654F;
  --cr-site-brand-mark-2: #C26478;
  --cr-site-brand-mark-3: #D98499;
}

/* Cold palette artwork: the mark returns to the canonical logo gradient. */
.cr[data-palette="crossroads-cold"] {
  --cr-site-brand-mark-1: #9D24F8;
  --cr-site-brand-mark-2: #317CF9;
  --cr-site-brand-mark-3: #06CBD1;
}

/* The one scheme whose tertiary fill carries a near-black label (#111417):
   here darkening would move TOWARDS the text, so hover lightens instead. */
.cr[data-palette="crossroads-cold"][data-theme="dark"] {
  --cr-site-tertiary-hover: var(--cr-color-action-tertiary-fill-hover);
  --cr-site-brand-mark-1: #B36BFB;
  --cr-site-brand-mark-2: #6BA3FB;
  --cr-site-brand-mark-3: #3FDCE0;
}