/* === DustOff Brand Styles === */
:root {
  --color-primary-teal: #2FA6A1;     /* Teal from logo */
  --color-primary-purple: #8A4F9E;   /* Purple from logo */
  --color-mid-blue: #6B8ED6;         /* Added to smooth the transition */
  --color-dark-text: #1F2937;        /* Dark slate / text */
  --color-light-background: #F9FAFB; /* Light Gray BG */
  --color-white: #FFFFFF;
  --color-accent-gold: #FFD700;
}

/* Text Colors */
.text-brand-teal { color: var(--color-primary-teal); }
.text-brand-purple { color: var(--color-primary-purple); }
.text-brand-dark { color: var(--color-dark-text); }
.text-brand-logo { color: var(--color-dark-text); }
.text-accent-gold { color: var(--color-accent-gold); }

/* Backgrounds */
.bg-brand-teal { background-color: var(--color-primary-teal); }
.bg-brand-purple { background-color: var(--color-primary-purple); }
.bg-brand-dark { background-color: var(--color-dark-text); }
.bg-light { background-color: var(--color-light-background); }

/* Borders */
.border-brand-teal { border-color: var(--color-primary-teal); }
.border-brand-purple { border-color: var(--color-primary-purple); }

/* Hover States */
.hover\:bg-brand-teal-dark:hover { background-color: #258580; }
.hover\:bg-brand-purple-dark:hover { background-color: #703f82; }
.hover\:text-accent-gold:hover { color: var(--color-accent-gold); }

/* Gradient Background (3-color smooth) */
.bg-brand-gradient {
  background-image: linear-gradient(to right,
    var(--color-primary-teal),
    var(--color-mid-blue),
    var(--color-primary-purple)
  );
}

/* Optional Gradient Overlay Utility (for hero blending) */
.bg-gradient-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
  z-index: 1;
}