@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

/* ==========================================================================
   DESIGN (2).MD OVERRIDE STYLE SYSTEM FOR ZONAUANG.ONLINE (DALA MINIMAL STYLE)
   ========================================================================== */

:root {
  /* Dala Design Tokens */
  --color-void: #000000;
  --color-bone-white: #ffffff;
  --color-ash-gray: #9a9a9a;
  --color-silver-mist: #bdbdbd;
  --color-electric-iris: #8052ff;
  --color-saffron-spark: #ffb829;
  --color-deep-verdant: #15846e;

  /* Override Existing Framework Custom Properties */
  --color-dark-primary: #000000 !important;
  --color-dark-surface: transparent !important;
  --color-dark-border: transparent !important;
  --color-purple-accent: rgba(128, 82, 255, 0.15) !important;
  --color-pink-accent: rgba(255, 184, 41, 0.15) !important;
  
  --tw-body-bg: #000000 !important;
  --tw-body-color: #bdbdbd !important;
  --tw-body-font-family: "Inter", sans-serif !important;
  
  --tw-menu-bg: #000000 !important;
  --tw-menu-item-color: #9a9a9a !important;
  --tw-menu-item-active-color: #ffffff !important;
  --tw-menu-item-hover-color: #ffffff !important;
  
  --tw-ring-color: rgba(128, 82, 255, 0.5) !important;
  --tw-ring-offset-color: transparent !important;
}

/* --- Global Typography & Base Reset --- */
* {
  font-family: "Inter", sans-serif !important;
  letter-spacing: -0.015em;
  box-shadow: none !important;
}

body, html {
  background-color: #000000 !important;
  background-image: none !important;
  color: #bdbdbd !important;
}

/* Display & Heading Styles */
h1, h2, h3, h4, h5, h6,
.text-white,
[class*="text-slate-50"],
[class*="text-gray-50"] {
  color: #ffffff !important;
  font-weight: 400 !important; /* Dala uses weight 400, not bold, for headlines */
  letter-spacing: -0.04em !important; /* Aggressive negative tracking */
}

/* High-emphasis Display Headings */
h1, .text-4xl, .text-5xl, .text-6xl {
  font-size: 3.5rem !important;
  line-height: 1.1 !important;
}

/* Body & UI Text Details */
body {
  font-weight: 200 !important; /* Ultra-light body copy */
  font-size: 18px !important;
}

/* Secondary & Muted Text */
.text-gray-400, .text-slate-400, .text-neutral-400,
.text-gray-500, .text-slate-500, .text-neutral-500 {
  color: #9a9a9a !important;
}

.text-gray-600, .text-slate-600, .text-neutral-600 {
  color: #bdbdbd !important;
}

/* --- Layout Backgrounds & Surfaces (Floating Void) --- */

/* Base floor (Pure Black Void Level 0) */
main, 
section, 
header, 
footer,
.bg-gray-950, 
.bg-slate-950, 
.bg-neutral-950,
.bg-gray-900,
.bg-slate-900,
.bg-neutral-900,
.bg-black {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Card & Borders Removal (Floating Elements) */
.card, 
.bg-gray-800, 
.bg-slate-800, 
.bg-neutral-800,
.bg-gray-900\/50, 
.bg-slate-900\/50, 
.bg-neutral-900\/50,
[class*="sidebar"],
[class*="navigation"],
[class*="bg-opacity-"],
[class*="backdrop-blur-"] {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 24px !important; /* Consistently 24px for visual cards */
}

/* --- Container Borders Removal --- */
hr,
border,
[class*="border-"] {
  border-color: transparent !important;
}

/* --- Component Overrides --- */

/* 1. Primary Action Button (Electric Iris Filled Pill) */
.bg-purple-600, 
.bg-purple-700, 
.bg-indigo-600, 
.bg-indigo-700, 
.bg-violet-600, 
.bg-violet-700,
.bg-primary, 
.btn-primary, 
button[type="submit"],
.bg-gradient-to-r {
  background: #8052ff !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important; /* Full pill */
  box-shadow: none !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  padding: 14px 24px !important;
}

.bg-purple-600:hover, 
.bg-purple-700:hover, 
.bg-indigo-600:hover, 
.bg-indigo-700:hover, 
.bg-violet-600:hover, 
.bg-violet-700:hover,
.bg-primary:hover, 
.btn-primary:hover, 
button[type="submit"]:hover {
  background: #6c3bf0 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 2. Secondary/Ghost Text Buttons (No borders, bare text link) */
.border-purple-600,
.border-indigo-600,
.border-violet-600,
.btn-secondary {
  border: none !important;
  background-color: transparent !important;
  color: #9a9a9a !important;
  border-radius: 0px !important;
  text-decoration: none !important;
  padding: 10px 20px !important;
}

.border-purple-600:hover,
.border-indigo-600:hover,
.border-violet-600:hover,
.btn-secondary:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* 3. Inputs & Forms */
input, 
select, 
textarea {
  background-color: #000000 !important;
  border: 1px solid #9a9a9a !important;
  color: #ffffff !important;
  border-radius: 24px !important; /* Consistently 24px radius */
  padding: 10px 20px !important;
}

input:focus, 
select:focus, 
textarea:focus {
  outline: none !important;
  border-color: #8052ff !important;
}

/* 4. Badges & Tags */
.badge,
[class*="badge-"] {
  background-color: rgba(128, 82, 255, 0.1) !important;
  border: 1px solid #8052ff !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
}

/* --- Brand Text Accent Colors --- */
.text-purple-600, 
.text-purple-500, 
.text-indigo-600, 
.text-indigo-500, 
.text-violet-600, 
.text-violet-500 {
  color: #8052ff !important; /* Electric Iris Accent */
}

/* Highlight Emphasis (Saffron Spark) */
.text-yellow-500,
.text-amber-500,
.text-yellow-600,
.text-amber-600 {
  color: #ffb829 !important; /* Saffron Spark Accent */
}

/* --- SVG Icons Accent Fill/Stroke --- */
svg.text-purple-600, 
svg.text-indigo-600, 
svg.text-violet-600 {
  color: #8052ff !important; 
}

svg.text-yellow-500,
svg.text-amber-500 {
  color: #ffb829 !important;
}

/* Desaturate Client/Partner Logos to monochrome #9a9a9a */
.logos-row img,
.partner-logos img {
  filter: grayscale(100%) brightness(0.8) !important;
  opacity: 0.6 !important;
}