/*
 * swatch, a colour token shown. Unforged house identity 3.0.0 Broadside, 2026-08-22. Owner: Andreas.
 *
 * A chip that paints one token, the token's name, its value printed as text, and its role in one
 * line. The chip is space.block tall inside a hairline in the ground's rule; the body is one
 * space.row of padding. One modifier per colour token paints the chip from the token and nothing
 * else: the hex that a swatch prints is documentation of the same token and is marked
 * value-shown-not-declared on its line, which is how 05_TOOLS/check-no-mirror.mjs tells a printed
 * value from a declared one. The swatch sizes itself to half the narrow measure and wraps in a row;
 * the grid is the style guide page's business. A style guide device, never a surface element.
 */
.u-swatch {
  display: block;
  flex: 1 1 calc(var(--u-measure-narrow) / 2);
  max-width: var(--u-measure-narrow);
  box-sizing: border-box;
  border: var(--u-line-hairline) solid var(--u-ground-rule);
  border-radius: var(--u-radius-none);
}
.u-swatch__chip {
  display: block;
  height: var(--u-space-block);
  border-block-end: var(--u-line-hairline) solid var(--u-ground-rule);
}
.u-swatch__body { padding: var(--u-space-row); }
.u-swatch__name { display: block; font-weight: 700; }
.u-swatch__value {
  display: block;
  font-size: var(--u-size-caption);
  line-height: var(--u-leading-caption);
  font-variant-numeric: tabular-nums;
  color: var(--u-ground-ink-secondary);
}
.u-swatch__role {
  display: block;
  margin-block-start: var(--u-space-row);
  font-size: var(--u-size-caption);
  line-height: var(--u-leading-caption);
  color: var(--u-ground-ink-secondary);
}
/* one modifier per colour token, the chip painted from the token */
.u-swatch--ground-paper .u-swatch__chip { background-color: var(--u-color-ground-paper); }
.u-swatch--ground-paper-raised .u-swatch__chip { background-color: var(--u-color-ground-paper-raised); }
.u-swatch--ground-trough .u-swatch__chip { background-color: var(--u-color-ground-trough); }
.u-swatch--ground-flood .u-swatch__chip { background-color: var(--u-color-ground-flood); }
.u-swatch--ink-primary .u-swatch__chip { background-color: var(--u-color-ink-primary); }
.u-swatch--ink-secondary .u-swatch__chip { background-color: var(--u-color-ink-secondary); }
.u-swatch--ink-secondary-warm .u-swatch__chip { background-color: var(--u-color-ink-secondary-warm); }
.u-swatch--ink-faint .u-swatch__chip { background-color: var(--u-color-ink-faint); }
.u-swatch--ink-inverse .u-swatch__chip { background-color: var(--u-color-ink-inverse); }
.u-swatch--ink-inverse-secondary .u-swatch__chip { background-color: var(--u-color-ink-inverse-secondary); }
.u-swatch--ink-inverse-faint .u-swatch__chip { background-color: var(--u-color-ink-inverse-faint); }
.u-swatch--rule-paper .u-swatch__chip { background-color: var(--u-color-rule-paper); }
.u-swatch--rule-flood .u-swatch__chip { background-color: var(--u-color-rule-flood); }
.u-swatch--rule-axis .u-swatch__chip { background-color: var(--u-color-rule-axis); }
.u-swatch--signal-primary .u-swatch__chip { background-color: var(--u-color-signal-primary); }
.u-swatch--signal-primary-ink .u-swatch__chip { background-color: var(--u-color-signal-primary-ink); }
.u-swatch--signal-secondary .u-swatch__chip { background-color: var(--u-color-signal-secondary); }
.u-swatch--signal-secondary-ink .u-swatch__chip { background-color: var(--u-color-signal-secondary-ink); }
.u-swatch--signal-tertiary .u-swatch__chip { background-color: var(--u-color-signal-tertiary); }
.u-swatch--signal-tertiary-ink .u-swatch__chip { background-color: var(--u-color-signal-tertiary-ink); }
.u-swatch--signal-heat .u-swatch__chip { background-color: var(--u-color-signal-heat); }
.u-swatch--signal-heat-ink .u-swatch__chip { background-color: var(--u-color-signal-heat-ink); }
.u-swatch--action-primary .u-swatch__chip { background-color: var(--u-color-action-primary); }
.u-swatch--action-ink .u-swatch__chip { background-color: var(--u-color-action-ink); }
.u-swatch--chrome-specular .u-swatch__chip { background-color: var(--u-color-chrome-specular); }
.u-swatch--chrome-100 .u-swatch__chip { background-color: var(--u-color-chrome-100); }
.u-swatch--chrome-300 .u-swatch__chip { background-color: var(--u-color-chrome-300); }
.u-swatch--chrome-500 .u-swatch__chip { background-color: var(--u-color-chrome-500); }
.u-swatch--chrome-700 .u-swatch__chip { background-color: var(--u-color-chrome-700); }
.u-swatch--chrome-800 .u-swatch__chip { background-color: var(--u-color-chrome-800); }
.u-swatch--chrome-900 .u-swatch__chip { background-color: var(--u-color-chrome-900); }
.u-swatch--person-a .u-swatch__chip { background-color: var(--u-color-person-a); }
.u-swatch--person-b .u-swatch__chip { background-color: var(--u-color-person-b); }