/* ==========================================================================
   STYLES-4.CSS - LAUNCHDARKLY FEATURE FLAGS STYLE (VARIANT 4)
   ACCENT COLOR: ELECTRIC EMERALD (#10B981) & CHARCOAL DEEP (#050E14)
   ========================================================================== */

body[data-variant="4"] {
  background-color: #050E14 !important;
  color: #F0FDF4 !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

body[data-variant="4"] main, 
body[data-variant="4"] section:not(#side-drawer *) {
  background-color: #050E14 !important;
  color: #F0FDF4 !important;
}

body[data-variant="4"] .bg-[#14101F],
body[data-variant="4"] .bg-[#161024],
body[data-variant="4"] .bg-[#1A1428],
body[data-variant="4"] .bg-[#0D0917],
body[data-variant="4"] .step-card {
  background-color: #0D1C26 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 0 35px rgba(16, 185, 129, 0.12) !important;
  color: #F0FDF4 !important;
}

body[data-variant="4"] .bg-white,
body[data-variant="4"] .bg-surface,
body[data-variant="4"] .bg-gray-50 {
  background-color: #081620 !important;
  color: #F0FDF4 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}
body[data-variant="4"] .text-[#16121F],
body[data-variant="4"] .text-gray-900,
body[data-variant="4"] .text-slate-900,
body[data-variant="4"] .text-gray-800 {
  color: #FFFFFF !important;
}
body[data-variant="4"] .text-gray-600,
body[data-variant="4"] .text-slate-500,
body[data-variant="4"] .text-gray-500 {
  color: #A7F3D0 !important;
}

/* Icon Contrast Enhancement for Variant 4 */
body[data-variant="4"] .material-symbols-outlined {
  color: #34D399 !important;
}

body[data-variant="4"] .fast-icon-1,
body[data-variant="4"] .fast-icon-2,
body[data-variant="4"] .fast-icon-3,
body[data-variant="4"] .fast-icon-4,
body[data-variant="4"] .w-12.h-12.rounded-xl.bg-\[\#4100a0\],
body[data-variant="4"] .bg-purple-100 {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: #6EE7B7 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

body[data-variant="4"] [class*="border-white"],
body[data-variant="4"] [class*="border-outline"],
body[data-variant="4"] [class*="border-gray-"] {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

body[data-variant="4"] .text-primary,
body[data-variant="4"] .text-[#7C32FF],
body[data-variant="4"] .text-purple-400,
body[data-variant="4"] .text-[#4100a0] {
  color: #10B981 !important;
}

body[data-variant="4"] .bg-primary,
body[data-variant="4"] .bg-[#7C32FF],
body[data-variant="4"] .bg-[#4100a0] {
  background-color: #10B981 !important;
  color: #FFFFFF !important;
}