/* ============================================================
   color-utilities.css
   Plain .text-*/.bg-*/.border-* classes for the token groups in
   tokens.css that the color picker (/theme/palette) offers but
   Bootstrap has no built-in class for: Hues, the Brand scale, and
   the Semantic group. Bootstrap's own .text-primary/.bg-success/
   etc. already exist and are left completely alone here — nothing
   in this file reuses a Bootstrap utility class name, so loading
   it can never silently reskin something already using one.
   (See CLAUDE.md: success/info/warning/danger are deliberately
   NOT repointed at the tenant's brand colour, so an alert still
   reads as an alert — that is also why the Semantic classes below
   are named .text-brand-success, not .text-success.)

   STATIC — ships with the app. Requires colors.css + tokens.css
   loaded first (defines the --color-*/--brand-* variables these
   classes reference). Loaded everywhere tokens.css is: the page
   builder canvas, the public site, and every preview pane that
   can render arbitrary authored HTML/classes.
   ============================================================ */

/* ── Hues — var(--color-{hue}) ───────────────────────────────
   No Bootstrap equivalent at all (Bootstrap's compiled utilities
   only cover its theme-color map, not the extended hue palette). */
.text-blue      { color: var(--color-blue); }
.bg-blue        { background-color: var(--color-blue); }
.border-blue    { border-color: var(--color-blue); }

.text-indigo    { color: var(--color-indigo); }
.bg-indigo      { background-color: var(--color-indigo); }
.border-indigo  { border-color: var(--color-indigo); }

.text-violet    { color: var(--color-violet); }
.bg-violet      { background-color: var(--color-violet); }
.border-violet  { border-color: var(--color-violet); }

.text-purple    { color: var(--color-purple); }
.bg-purple      { background-color: var(--color-purple); }
.border-purple  { border-color: var(--color-purple); }

.text-fuchsia   { color: var(--color-fuchsia); }
.bg-fuchsia     { background-color: var(--color-fuchsia); }
.border-fuchsia { border-color: var(--color-fuchsia); }

.text-pink      { color: var(--color-pink); }
.bg-pink        { background-color: var(--color-pink); }
.border-pink    { border-color: var(--color-pink); }

.text-rose      { color: var(--color-rose); }
.bg-rose        { background-color: var(--color-rose); }
.border-rose    { border-color: var(--color-rose); }

.text-crimson   { color: var(--color-crimson); }
.bg-crimson     { background-color: var(--color-crimson); }
.border-crimson { border-color: var(--color-crimson); }

.text-red       { color: var(--color-red); }
.bg-red         { background-color: var(--color-red); }
.border-red     { border-color: var(--color-red); }

.text-orange    { color: var(--color-orange); }
.bg-orange      { background-color: var(--color-orange); }
.border-orange  { border-color: var(--color-orange); }

.text-amber     { color: var(--color-amber); }
.bg-amber       { background-color: var(--color-amber); }
.border-amber   { border-color: var(--color-amber); }

.text-lime      { color: var(--color-lime); }
.bg-lime        { background-color: var(--color-lime); }
.border-lime    { border-color: var(--color-lime); }

.text-green     { color: var(--color-green); }
.bg-green       { background-color: var(--color-green); }
.border-green   { border-color: var(--color-green); }

.text-teal      { color: var(--color-teal); }
.bg-teal        { background-color: var(--color-teal); }
.border-teal    { border-color: var(--color-teal); }

.text-cyan      { color: var(--color-cyan); }
.bg-cyan        { background-color: var(--color-cyan); }
.border-cyan    { border-color: var(--color-cyan); }

/* ── Brand scale — var(--brand-primary-{step}) ───────────────
   Named .text-brand-N rather than .text-primary-N: Bootstrap 5.3
   already ships .text-primary/.bg-primary (mapped to --site, the
   workspace's own "Brand" swatch) plus .bg-primary-subtle — a
   "-N" suffix on "primary" would read as one more step of THAT
   scale, not a separate one. */
.text-brand-50   { color: var(--brand-primary-50); }
.bg-brand-50     { background-color: var(--brand-primary-50); }
.border-brand-50 { border-color: var(--brand-primary-50); }

.text-brand-100   { color: var(--brand-primary-100); }
.bg-brand-100     { background-color: var(--brand-primary-100); }
.border-brand-100 { border-color: var(--brand-primary-100); }

.text-brand-200   { color: var(--brand-primary-200); }
.bg-brand-200     { background-color: var(--brand-primary-200); }
.border-brand-200 { border-color: var(--brand-primary-200); }

.text-brand-300   { color: var(--brand-primary-300); }
.bg-brand-300     { background-color: var(--brand-primary-300); }
.border-brand-300 { border-color: var(--brand-primary-300); }

.text-brand-400   { color: var(--brand-primary-400); }
.bg-brand-400     { background-color: var(--brand-primary-400); }
.border-brand-400 { border-color: var(--brand-primary-400); }

.text-brand-500   { color: var(--brand-primary-500); }
.bg-brand-500     { background-color: var(--brand-primary-500); }
.border-brand-500 { border-color: var(--brand-primary-500); }

.text-brand-600   { color: var(--brand-primary-600); }
.bg-brand-600     { background-color: var(--brand-primary-600); }
.border-brand-600 { border-color: var(--brand-primary-600); }

.text-brand-700   { color: var(--brand-primary-700); }
.bg-brand-700     { background-color: var(--brand-primary-700); }
.border-brand-700 { border-color: var(--brand-primary-700); }

.text-brand-800   { color: var(--brand-primary-800); }
.bg-brand-800     { background-color: var(--brand-primary-800); }
.border-brand-800 { border-color: var(--brand-primary-800); }

.text-brand-900   { color: var(--brand-primary-900); }
.bg-brand-900     { background-color: var(--brand-primary-900); }
.border-brand-900 { border-color: var(--brand-primary-900); }

/* ── Semantic — var(--brand-{name}-600) + the -100 "soft" tint ─
   A parallel scale to Bootstrap's own success/info/warning/danger
   (--bs-success etc.), not an alias of it — ThemeCss deliberately
   never repoints those at the tenant's brand, so .text-success
   keeps meaning "Bootstrap's stock green" everywhere it's already
   used. These are named .text-brand-success etc. for that reason. */
.text-brand-success     { color: var(--brand-success-600); }
.bg-brand-success       { background-color: var(--brand-success-600); }
.bg-brand-success-soft  { background-color: var(--brand-success-100); }

.text-brand-info        { color: var(--brand-info-600); }
.bg-brand-info          { background-color: var(--brand-info-600); }
.bg-brand-info-soft     { background-color: var(--brand-info-100); }

.text-brand-warning     { color: var(--brand-warning-600); }
.bg-brand-warning       { background-color: var(--brand-warning-600); }
.bg-brand-warning-soft  { background-color: var(--brand-warning-100); }

.text-brand-danger      { color: var(--brand-danger-600); }
.bg-brand-danger        { background-color: var(--brand-danger-600); }
.bg-brand-danger-soft   { background-color: var(--brand-danger-100); }