/* css/site_tokens.css — Supplemental utility classes for hidaas.css tokens.
 *
 * hidaas.css (§16) covers flex, display, spacing, text alignment, colour,
 * background, border-radius, and overflow utilities.
 *
 * This file adds only what is not already in hidaas.css:
 *   - Padding helpers
 *   - Brand-semantic colour aliases (for components that pre-date the ramp names)
 *   - Card convenience class
 */

/* --- Padding helpers (not in hidaas.css §16) --- */
.px-2 { padding-inline: var(--space-2) !important; }
.px-4 { padding-inline: var(--space-4) !important; }
.px-6 { padding-inline: var(--space-6) !important; }
.py-2 { padding-block:  var(--space-2) !important; }
.py-4 { padding-block:  var(--space-4) !important; }
.py-6 { padding-block:  var(--space-6) !important; }
.p-4  { padding:        var(--space-4) !important; }
.p-6  { padding:        var(--space-6) !important; }

/* --- Semantic colour aliases mapped to hidaas.css ramps --- */
.text-brand-primary   { color: var(--color-red-800)  !important; }
.text-brand-secondary { color: var(--color-steel)    !important; }
.text-brand-accent    { color: var(--color-blue-800) !important; }
.text-brand-muted     { color: var(--color-pewter)   !important; }
.text-success         { color: var(--color-success)  !important; }
.text-error           { color: var(--color-error)    !important; }

.bg-brand-primary     { background-color: var(--color-red-800)  !important; }
.bg-brand-accent      { background-color: var(--color-blue-800) !important; }
.bg-surface           { background-color: var(--color-surface-page) !important; }

/* --- Card convenience --- */
.card-brand {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}