/* =========================================================
   UTILITIES.CSS
   Token-Driven Bootstrap Utility Override Layer
   Load this AFTER bootstrap.min.css
========================================================= */

/* =========================================================
   ROOT / FALLBACK RGB TOKENS
========================================================= */
:root {
  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0)
  );

  /* Fallback RGB tokens in case some rgb vars are missing */
  --util-primary-rgb: var(--color-brand-primary-rgb, 201, 31, 31);
  --util-secondary-rgb: var(--color-brand-secondary-rgb, 143, 23, 23);
  --util-accent-rgb: var(--color-brand-accent-rgb, 242, 196, 15);
  --util-success-rgb: var(--color-success-rgb, 31, 138, 76);
  --util-danger-rgb: var(--color-danger-rgb, 201, 31, 31);
  --util-info-rgb: var(--color-info-rgb, 42, 27, 141);
  --util-dark-rgb: var(--color-text-primary-rgb, 42, 26, 26);
  --util-light-rgb: 255, 253, 247;
  --util-white-rgb: 255, 255, 255;
}

/* =========================================================
   BASIC SPACING HELPERS
========================================================= */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }

.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }

/* =========================================================
   DISPLAY HELPERS
========================================================= */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* =========================================================
   FLEX HELPERS
========================================================= */
.align-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }

/* =========================================================
   WIDTH / TEXT / GENERIC HELPERS
========================================================= */
.w-100 { width: 100% !important; }

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-muted { color: var(--color-text-muted) !important; }
.fw-semibold { font-weight: 600 !important; }

.rounded-lg { border-radius: var(--radius-lg) !important; }
.shadow-sm { box-shadow: var(--shadow-soft) !important; }

.overflow-hidden { overflow: hidden !important; }

/* =========================================================
   BACKGROUND OPACITY SUPPORT
   Restores Bootstrap behavior for bg-opacity-* utilities
========================================================= */
.bg-opacity-10 { --bs-bg-opacity: .10 !important; }
.bg-opacity-25 { --bs-bg-opacity: .25 !important; }
.bg-opacity-50 { --bs-bg-opacity: .50 !important; }
.bg-opacity-75 { --bs-bg-opacity: .75 !important; }
.bg-opacity-100 { --bs-bg-opacity: 1 !important; }

/* =========================================================
   BACKGROUND UTILITIES
   Supports bg-* + bg-opacity-*
========================================================= */
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-accent-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--util-white-rgb), var(--bs-bg-opacity)) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

/* =========================================================
   SOFT BACKGROUND UTILITIES
========================================================= */
.bg-primary-soft {
  background-color: rgba(var(--util-primary-rgb), 0.10) !important;
}

.bg-secondary-soft {
  background-color: rgba(var(--util-secondary-rgb), 0.10) !important;
}

.bg-success-soft {
  background-color: rgba(var(--util-success-rgb), 0.10) !important;
}

.bg-danger-soft {
  background-color: rgba(var(--util-danger-rgb), 0.10) !important;
}

.bg-warning-soft {
  background-color: rgba(var(--util-accent-rgb), 0.18) !important;
}

.bg-info-soft {
  background-color: rgba(var(--util-info-rgb), 0.10) !important;
}

.bg-dark-soft {
  background-color: rgba(var(--util-dark-rgb), 0.06) !important;
}

/* =========================================================
   CONTEXTUAL SURFACE UTILITIES
========================================================= */
.text-bg-primary {
  color: var(--color-text-inverse) !important;
  background-color: rgba(var(--util-primary-rgb), 1) !important;
}

.text-bg-secondary {
  color: var(--color-text-inverse) !important;
  background-color: rgba(var(--util-secondary-rgb), 1) !important;
}

.text-bg-success {
  color: var(--color-text-inverse) !important;
  background-color: rgba(var(--util-success-rgb), 1) !important;
}

.text-bg-danger {
  color: var(--color-text-inverse) !important;
  background-color: rgba(var(--util-danger-rgb), 1) !important;
}

.text-bg-warning {
  color: var(--color-text-primary) !important;
  background-color: rgba(var(--util-accent-rgb), 1) !important;
}

.text-bg-info {
  color: var(--color-text-inverse) !important;
  background-color: rgba(var(--util-info-rgb), 1) !important;
}

.text-bg-light {
  color: var(--color-text-primary) !important;
  background-color: var(--color-surface-soft) !important;
}

.text-bg-dark {
  color: var(--color-text-inverse) !important;
  background-color: rgba(var(--util-dark-rgb), 1) !important;
}

/* =========================================================
   TEXT UTILITIES
========================================================= */
.text-primary {
  color: var(--color-brand-primary) !important;
}

.text-secondary {
  color: var(--color-brand-secondary) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.text-warning {
  color: #8a6a00 !important;
}

.text-info {
  color: var(--color-info) !important;
}

.text-light {
  color: var(--color-surface-soft) !important;
}

.text-dark {
  color: var(--color-text-primary) !important;
}

.text-white {
  color: var(--color-text-inverse) !important;
}

.text-body {
  color: var(--color-text-primary) !important;
}

.text-body-secondary,
.text-muted {
  color: var(--color-text-muted) !important;
}

.text-black-50 {
  color: rgba(var(--util-dark-rgb), 0.50) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.70) !important;
}

/* =========================================================
   LINK UTILITIES
========================================================= */
.link-primary {
  color: var(--color-brand-primary) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: var(--color-brand-secondary) !important;
}

.link-secondary {
  color: var(--color-brand-secondary) !important;
}

.link-secondary:hover,
.link-secondary:focus {
  color: var(--color-text-primary) !important;
}

.link-success {
  color: var(--color-success) !important;
}

.link-danger {
  color: var(--color-danger) !important;
}

.link-warning {
  color: #8a6a00 !important;
}

.link-info {
  color: var(--color-info) !important;
}

.link-dark {
  color: var(--color-text-primary) !important;
}

/* =========================================================
   BORDER UTILITIES
========================================================= */
.border {
  border-color: var(--color-line) !important;
}

.border-top,
.border-end,
.border-bottom,
.border-start {
  border-color: var(--color-line) !important;
}

.border-primary {
  border-color: var(--color-brand-primary) !important;
}

.border-secondary {
  border-color: var(--color-brand-secondary) !important;
}

.border-success {
  border-color: var(--color-success) !important;
}

.border-danger {
  border-color: var(--color-danger) !important;
}

.border-warning {
  border-color: var(--color-warning) !important;
}

.border-info {
  border-color: var(--color-info) !important;
}

.border-light {
  border-color: var(--color-surface-soft) !important;
}

.border-dark {
  border-color: var(--color-text-primary) !important;
}

.border-white {
  border-color: var(--color-surface) !important;
}

/* =========================================================
   SUBTLE BORDER UTILITIES
========================================================= */
.border-primary-subtle {
  border-color: rgba(var(--util-primary-rgb), 0.18) !important;
}

.border-secondary-subtle {
  border-color: rgba(var(--util-secondary-rgb), 0.18) !important;
}

.border-success-subtle {
  border-color: rgba(var(--util-success-rgb), 0.18) !important;
}

.border-danger-subtle {
  border-color: rgba(var(--util-danger-rgb), 0.18) !important;
}

.border-warning-subtle {
  border-color: rgba(var(--util-accent-rgb), 0.28) !important;
}

.border-info-subtle {
  border-color: rgba(var(--util-info-rgb), 0.18) !important;
}

.border-dark-subtle {
  border-color: rgba(var(--util-dark-rgb), 0.16) !important;
}

/* =========================================================
   SUBTLE BACKGROUND UTILITIES
========================================================= */
.bg-primary-subtle {
  background-color: rgba(var(--util-primary-rgb), 0.08) !important;
}

.bg-secondary-subtle {
  background-color: rgba(var(--util-secondary-rgb), 0.08) !important;
}

.bg-success-subtle {
  background-color: rgba(var(--util-success-rgb), 0.08) !important;
}

.bg-danger-subtle {
  background-color: rgba(var(--util-danger-rgb), 0.08) !important;
}

.bg-warning-subtle {
  background-color: rgba(var(--util-accent-rgb), 0.16) !important;
}

.bg-info-subtle {
  background-color: rgba(var(--util-info-rgb), 0.08) !important;
}

.bg-light-subtle {
  background-color: var(--color-surface-soft) !important;
}

.bg-dark-subtle {
  background-color: rgba(var(--util-dark-rgb), 0.06) !important;
}

/* =========================================================
   EMPHASIS TEXT UTILITIES
========================================================= */
.text-primary-emphasis {
  color: var(--color-brand-secondary) !important;
}

.text-secondary-emphasis {
  color: var(--color-brand-secondary) !important;
}

.text-success-emphasis {
  color: #17693a !important;
}

.text-danger-emphasis {
  color: var(--color-brand-secondary) !important;
}

.text-warning-emphasis {
  color: #7a5d00 !important;
}

.text-info-emphasis {
  color: #21166f !important;
}

.text-light-emphasis {
  color: var(--color-text-primary) !important;
}

.text-dark-emphasis {
  color: #171010 !important;
}

/* =========================================================
   GRADIENT UTILITIES
========================================================= */
.bg-gradient {
  background-image: var(--bs-gradient) !important;
}

.bg-primary.bg-gradient,
.text-bg-primary.bg-gradient {
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.02) 100%
    ) !important;
}

.bg-secondary.bg-gradient,
.text-bg-secondary.bg-gradient {
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.02) 100%
    ) !important;
}

.bg-success.bg-gradient,
.text-bg-success.bg-gradient {
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.02) 100%
    ) !important;
}

.bg-danger.bg-gradient,
.text-bg-danger.bg-gradient {
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.02) 100%
    ) !important;
}

.bg-warning.bg-gradient,
.text-bg-warning.bg-gradient {
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 100%
    ) !important;
}

.bg-info.bg-gradient,
.text-bg-info.bg-gradient {
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.02) 100%
    ) !important;
}

.bg-dark.bg-gradient,
.text-bg-dark.bg-gradient {
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.01) 100%
    ) !important;
}

/* =========================================================
   CUSTOM GRADIENT HELPERS
========================================================= */
.bg-brand-gradient {
  color: var(--color-text-inverse) !important;
  background:
    linear-gradient(
      135deg,
      var(--color-brand-primary) 0%,
      var(--color-brand-secondary) 100%
    ) !important;
}

.bg-accent-gradient {
  color: var(--color-text-primary) !important;
  background:
    linear-gradient(
      135deg,
      rgba(var(--util-accent-rgb), 0.95) 0%,
      rgba(var(--util-accent-rgb), 0.70) 100%
    ) !important;
}

.bg-surface-gradient {
  background:
    linear-gradient(
      180deg,
      var(--color-surface) 0%,
      var(--color-surface-soft) 100%
    ) !important;
}

/* =========================================================
   RADIUS / SHADOW ENHANCERS
========================================================= */
.rounded {
  border-radius: var(--radius-md) !important;
}

.rounded-1 {
  border-radius: var(--radius-xs) !important;
}

.rounded-2 {
  border-radius: var(--radius-sm) !important;
}

.rounded-3 {
  border-radius: var(--radius-md) !important;
}

.rounded-4 {
  border-radius: var(--radius-lg) !important;
}

.rounded-5 {
  border-radius: var(--radius-xl) !important;
}

.rounded-pill {
  border-radius: var(--radius-pill) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-soft) !important;
}

.shadow {
  box-shadow: var(--shadow-soft) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-medium) !important;
}

.shadow-none {
  box-shadow: none !important;
}

/* =========================================================
   SURFACE / GLASS HELPERS
========================================================= */
.bg-glass {
  background: var(--color-surface-glass) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

.surface {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.surface-soft {
  background-color: var(--color-surface-soft) !important;
  color: var(--color-text-primary) !important;
}

/* =========================================================
   FOCUS HELPERS
========================================================= */
.focus-ring-brand:focus,
.focus-ring-brand:focus-visible {
  box-shadow: var(--focus-ring-brand) !important;
  outline: none !important;
}

/* =========================================================
   MOBILE REFINEMENT
========================================================= */
@media (max-width: 767.98px) {
  .shadow-lg {
    box-shadow: var(--shadow-soft) !important;
  }
}