/* ═══════════════════════════════════════════════════════════════
   PROPROBIN — Utility Classes (using theme tokens)
   ═══════════════════════════════════════════════════════════════
   These supplement Bootstrap's utilities with theme-aware
   overrides. Use these for one-off inline style replacements.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Text Color Utilities ─── */
.text-brand        { color: var(--prp-brand-primary) !important; }
.text-brand-hover:hover { color: var(--prp-brand-primary-hover) !important; }
.text-teal         { color: var(--prp-brand-teal) !important; }
.text-amber        { color: var(--prp-brand-amber) !important; }
.text-gold         { color: var(--prp-brand-gold) !important; }
.text-green        { color: var(--prp-brand-green) !important; }
.text-purple       { color: var(--prp-brand-purple) !important; }
.text-blue         { color: var(--prp-brand-blue) !important; }
.text-danger-prp   { color: var(--prp-brand-danger) !important; }
.text-body-prp     { color: var(--prp-text-primary) !important; }
.text-secondary-prp{ color: var(--prp-text-secondary) !important; }
.text-muted-prp    { color: var(--prp-text-muted) !important; }
.text-faint        { color: var(--prp-text-faint) !important; }
.text-inverse      { color: var(--prp-text-inverse) !important; }
.text-inverse-muted{ color: var(--prp-text-inverse-muted) !important; }
.text-inverse-faint{ color: var(--prp-text-inverse-faint) !important; }
.text-cream        { color: var(--prp-cream) !important; }

/* Stat value colors (replaces inline style="color:#0ea5e9" etc.) */
.text-stat-teal    { color: var(--prp-stat-teal) !important; }
.text-stat-amber   { color: var(--prp-stat-amber) !important; }
.text-stat-red     { color: var(--prp-stat-red) !important; }
.text-stat-green   { color: var(--prp-stat-green) !important; }

/* ─── Background Utilities ─── */
.bg-body-prp       { background-color: var(--prp-surface-body) !important; }
.bg-page           { background-color: var(--prp-surface-page) !important; }
.bg-card           { background-color: var(--prp-surface-card) !important; }
.bg-card-hover     { background-color: var(--prp-surface-card-hover) !important; }
.bg-elevated       { background-color: var(--prp-surface-elevated) !important; }
.bg-glass          { background: var(--prp-surface-glass) !important; backdrop-filter: blur(12px); }
.bg-dark-prp       { background-color: var(--prp-surface-dark) !important; }
.bg-dark-alt       { background-color: var(--prp-surface-dark-alt) !important; }
.bg-dark-elevated  { background-color: var(--prp-surface-dark-elevated) !important; }

/* Semantic backgrounds */
.bg-brand-light    { background-color: var(--prp-brand-primary-light) !important; }
.bg-teal-light     { background-color: var(--prp-brand-teal-light) !important; }
.bg-amber-light    { background-color: var(--prp-brand-amber-light) !important; }
.bg-gold-light     { background-color: var(--prp-brand-gold-light) !important; }
.bg-green-light    { background-color: var(--prp-brand-green-light) !important; }
.bg-purple-light   { background-color: var(--prp-brand-purple-light) !important; }
.bg-blue-light     { background-color: var(--prp-brand-blue-light) !important; }
.bg-danger-light   { background-color: var(--prp-brand-danger-light) !important; }

/* ─── Border Utilities ─── */
.border-default    { border-color: var(--prp-border-default) !important; }
.border-light-prp  { border-color: var(--prp-border-light) !important; }
.border-dark-prp   { border-color: var(--prp-border-dark) !important; }
.border-brand      { border-color: var(--prp-brand-primary) !important; }
.border-card       { border: 1px solid var(--prp-border-card) !important; }

/* ─── Shadow Utilities ─── */
.shadow-sm-prp     { box-shadow: var(--prp-shadow-sm) !important; }
.shadow-md-prp     { box-shadow: var(--prp-shadow-md) !important; }
.shadow-lg-prp     { box-shadow: var(--prp-shadow-lg) !important; }
.shadow-xl-prp     { box-shadow: var(--prp-shadow-xl) !important; }
.shadow-card       { box-shadow: var(--prp-shadow-card) !important; }

/* ─── Radius Utilities ─── */
.rounded-xs        { border-radius: var(--prp-radius-xs) !important; }
.rounded-sm-prp    { border-radius: var(--prp-radius-sm) !important; }
.rounded-md        { border-radius: var(--prp-radius-md) !important; }
.rounded-lg-prp    { border-radius: var(--prp-radius-lg) !important; }
.rounded-xl        { border-radius: var(--prp-radius-xl) !important; }
.rounded-2xl       { border-radius: var(--prp-radius-2xl) !important; }

/* ─── Transition Utilities ─── */
.transition-fast   { transition: all var(--prp-transition-fast); }
.transition-base   { transition: all var(--prp-transition-base); }
.transition-slow   { transition: all var(--prp-transition-slow); }

/* ─── Font Size Utilities ─── */
.text-xs           { font-size: var(--prp-font-size-xs) !important; }
.text-sm-prp       { font-size: var(--prp-font-size-sm) !important; }
.text-base         { font-size: var(--prp-font-size-base) !important; }
.text-lg-prp       { font-size: var(--prp-font-size-lg) !important; }
.text-xl-prp       { font-size: var(--prp-font-size-xl) !important; }
.text-2xl          { font-size: var(--prp-font-size-2xl) !important; }
.text-3xl          { font-size: var(--prp-font-size-3xl) !important; }
.text-4xl          { font-size: var(--prp-font-size-4xl) !important; }

/* ─── Font Weight Utilities ─── */
.fw-light-prp      { font-weight: var(--prp-font-weight-light) !important; }
.fw-normal-prp     { font-weight: var(--prp-font-weight-normal) !important; }
.fw-medium-prp     { font-weight: var(--prp-font-weight-medium) !important; }
.fw-semibold-prp   { font-weight: var(--prp-font-weight-semibold) !important; }
.fw-bold-prp       { font-weight: var(--prp-font-weight-bold) !important; }

/* ─── Hover Effect Utilities ─── */
.hover-lift {
  transition: transform var(--prp-transition-base), box-shadow var(--prp-transition-base);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--prp-shadow-lg);
}

.hover-glow-brand:hover {
  box-shadow: 0 0 20px var(--prp-brand-primary-shadow);
}

.hover-glow-teal:hover {
  box-shadow: 0 0 20px var(--prp-brand-teal-shadow);
}