/* ==========================================================================
   GLOBAL COLOR SYSTEM
   Brand Colors: Primary (#1EBBD7), Secondary (#1699A8)
   ========================================================================== */

:root {
  --color-primary: #1EBBD7;
  --color-secondary: #1699A8;
  --color-primary-hover: #1699A8;
  --color-secondary-hover: #1EBBD7;
}

/* ----------------------------------
   Global Text Accents
   ---------------------------------- */

/* Sub headings & Section Labels use Secondary */
.sub-heading, 
.hero-sub, 
.section-sub, 
.section-label,
.pricing-name {
  color: var(--color-secondary) !important;
}

/* Highlights, Accents, Badges, Icons use Primary */
.accent, 
.highlight, 
.badge, 
.hero-badge, 
.text-accent,
.stat-val, 
.hero-stat-val, 
.result-num,
.metric-value,
.counter {
  color: var(--color-primary) !important;
}

/* SVG Icons - Stroke / Fill overrides where applicable */
.icon-primary stroke,
.lucide stroke {
  /* We will handle icon colors primarily via Tailwind classes like text-primary, 
     but this acts as a fallback for custom SVGs if they inherit */
}

/* ----------------------------------
   Button System
   ---------------------------------- */

/* Base Button Properties */
.btn-primary, 
.btn-secondary, 
.btn-outline, 
.btn-premium,
.cta-btn {
  border-width: 1px !important;
  border-style: solid !important;
  transition: all 0.3s ease !important;
}

/* Primary Buttons */
.btn-primary, 
.cta-btn {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover, 
.cta-btn:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: #ffffff !important;
}

/* Secondary Buttons (Includes Outline & Premium mappings) */
.btn-secondary, 
.btn-outline, 
.btn-premium {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #ffffff !important;
}

.btn-secondary:hover, 
.btn-outline:hover, 
.btn-premium:hover {
  background-color: var(--color-secondary-hover) !important;
  border-color: var(--color-secondary-hover) !important;
  color: #ffffff !important;
}

/* ----------------------------------
   Interactive Elements
   ---------------------------------- */

/* Active Menu Items */
.nav-link.active,
.mobile-link.active {
  color: var(--color-primary) !important;
}

/* Footer Links Hover */
footer a:hover,
.footer-link:hover {
  color: var(--color-primary) !important;
}

/* Form Focus */
input:focus, 
textarea:focus, 
select:focus,
.cta-input:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/* Service Card Highlights */
.svc-card:hover {
  border-color: var(--color-primary) !important;
}

.card-icon-wrap {
  color: var(--color-primary) !important;
}


.bg-gradient-brand {
    background: linear-gradient(135deg, #1EBBD7 0%, #1699A8 100%);
}

.text-gradient-brand {
    background: linear-gradient(135deg, #1EBBD7, #1699A8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}