/* ============================================================
   TWIS World — Utilities CSS
   Helper classes that supplement Bootstrap 5
   ============================================================ */

/* ============================================================
   1. BACKGROUND COLORS
   ============================================================ */
.bg-primary-brand     { background-color: var(--tw-primary) !important; }
.bg-primary-container { background-color: var(--tw-primary-container) !important; }
.bg-secondary-brand   { background-color: var(--tw-secondary) !important; }
.bg-surface-dark      { background-color: var(--tw-surface-dark) !important; }
.bg-surface-muted     { background-color: var(--tw-surface-muted) !important; }
.bg-surface-low       { background-color: var(--tw-surface-container-low) !important; }
.bg-surface-container { background-color: var(--tw-surface-container) !important; }
.bg-surface-highest   { background-color: var(--tw-surface-container-highest) !important; }
.bg-white             { background-color: #ffffff !important; }
.bg-transparent       { background: transparent !important; }

/* Gradient backgrounds */
.bg-cta-gradient {
  background: linear-gradient(135deg, var(--tw-cta-start) 0%, var(--tw-cta-end) 100%) !important;
}
.bg-glass {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bg-glass-dark {
  background: rgba(0,36,33,0.8) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ============================================================
   2. TEXT COLORS
   ============================================================ */
.text-on-primary        { color: #ffffff !important; }
.text-primary-container { color: var(--tw-on-primary-container) !important; }
.text-on-dark           { color: rgba(255,255,255,0.85) !important; }
.text-muted-on-dark     { color: rgba(255,255,255,0.55) !important; }
.text-accent-sky        { color: var(--tw-on-tertiary-container) !important; }

/* ============================================================
   3. BORDER UTILITIES
   ============================================================ */
.border-brand    { border-color: var(--tw-primary) !important; }
.border-secondary-brand { border-color: var(--tw-secondary) !important; }
.border-white-10 { border-color: rgba(255,255,255,0.1) !important; }
.border-white-20 { border-color: rgba(255,255,255,0.2) !important; }
.border-white-30 { border-color: rgba(255,255,255,0.3) !important; }
.border-l-secondary { border-left: 4px solid var(--tw-secondary) !important; }
.border-r-2xl { border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0; }

/* ============================================================
   4. SPACING HELPERS
   ============================================================ */
.gap-section { gap: var(--section-gap); }
.gap-gutter  { gap: var(--gutter); }
.mt-section  { margin-top: var(--section-gap); }
.mb-section  { margin-bottom: var(--section-gap); }
.py-section  { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }

/* ============================================================
   5. OPACITY UTILITIES
   ============================================================ */
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }

/* ============================================================
   6. ICON SIZE UTILITIES
   ============================================================ */
.icon-sm  { font-size: 1.25rem; }
.icon-md  { font-size: 1.5rem; }
.icon-lg  { font-size: 2rem; }
.icon-xl  { font-size: 3rem; }
.icon-2xl { font-size: 5rem; }
.icon-3xl { font-size: 8rem; }

/* ============================================================
   7. CARD ICON WRAPPERS
   ============================================================ */
.icon-wrap-teal {
  background: var(--tw-tertiary-fixed);
  color: var(--tw-tertiary-container);
}
.icon-wrap-green {
  background: var(--tw-primary-fixed);
  color: var(--tw-primary);
}
.icon-wrap-orange {
  background: var(--tw-secondary-fixed);
  color: var(--tw-secondary);
}
.icon-wrap-blue {
  background: rgba(0,169,225,0.12);
  color: #0082B0;
}
.icon-wrap-dark {
  background: var(--tw-on-primary-container);
  color: #ffffff;
}

/* ============================================================
   8. LETTER SPACING
   ============================================================ */
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* ============================================================
   9. WEIGHT UTILITIES
   ============================================================ */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* ============================================================
   10. LINE HEIGHT
   ============================================================ */
.lh-tight  { line-height: 1.2; }
.lh-snug   { line-height: 1.35; }
.lh-normal { line-height: 1.5; }
.lh-relaxed{ line-height: 1.7; }

/* ============================================================
   11. POSITION HELPERS
   ============================================================ */
.inset-0 { inset: 0; }
.z-neg   { z-index: -1; }
.z-1     { z-index: 1; }
.z-2     { z-index: 2; }
.z-10    { z-index: 10; }

/* ============================================================
   12. SECTION SEPARATOR LINE
   ============================================================ */
.separator {
  width: 4rem;
  height: 0.375rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--tw-cta-start), var(--tw-cta-end));
}

/* ============================================================
   13. SCROLL BEHAVIOR
   ============================================================ */
.no-overflow   { overflow: hidden; }
.overflow-x-clip { overflow-x: clip; }

/* ============================================================
   14. TRANSITION UTILITIES
   ============================================================ */
.transition-fast { transition: var(--transition-fast); }
.transition-base { transition: var(--transition-base); }
.transition-slow { transition: var(--transition-slow); }

/* ============================================================
   15. POINTER EVENT UTILITIES
   ============================================================ */
.pointer-none { pointer-events: none; }
.pointer-auto { pointer-events: auto; }

/* ============================================================
   16. FONT FAMILY UTILITIES
   ============================================================ */
.font-poppins { font-family: 'Poppins', sans-serif; }
.font-inter   { font-family: 'Inter', sans-serif; }

/* ============================================================
   17. DARK SECTION HELPERS
   ============================================================ */
.dark-section h2,
.dark-section h3,
.dark-section h4 {
  color: #ffffff;
}
.dark-section p {
  color: rgba(255,255,255,0.75);
}

/* ============================================================
   18. GRAYSCALE HOVER
   ============================================================ */
.grayscale-hover {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.grayscale-hover:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================================
   19. SUCCESS / ERROR BANNERS
   ============================================================ */
.form-success-msg {
  display: none;
  background: rgba(25,135,84,0.1);
  border: 1px solid rgba(25,135,84,0.3);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  color: #0a5c38;
  font-weight: 600;
}
.form-success-msg.show { display: flex; align-items: center; gap: 0.5rem; }

.form-error-msg {
  display: none;
  background: rgba(186,26,26,0.1);
  border: 1px solid rgba(186,26,26,0.3);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  color: var(--tw-error);
  font-weight: 600;
}
.form-error-msg.show { display: flex; align-items: center; gap: 0.5rem; }

/* ============================================================
   END OF UTILITIES.CSS
   ============================================================ */