:root{
  --primary: #32B8C6;
  --primary-foreground: #ffffff;
  --primary-10: rgba(50,184,198,0.10);
  --primary-20: rgba(50,184,198,0.20);
  --primary-30: rgba(50,184,198,0.30);
  --primary-90: rgba(50,184,198,0.90);
}

/* Core overrides to make "celeste" the dominant color */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.text-primary-foreground { color: var(--primary-foreground) !important; }
.border-primary { border-color: var(--primary) !important; }
.shadow-primary\/30 { box-shadow: 0 6px 18px var(--primary-30) !important; }
.ring-primary\/50 { box-shadow: 0 0 0 8px rgba(50,184,198,0.18) !important; }

/* Opacity variants used in templates */
.bg-primary\/10 { background-color: var(--primary-10) !important; }
.bg-primary\/20 { background-color: var(--primary-20) !important; }
.bg-primary\/30 { background-color: var(--primary-30) !important; }
.bg-primary\/90 { background-color: var(--primary-90) !important; }
.text-primary\/90 { color: var(--primary-90) !important; }
.border-primary\/20 { border-color: var(--primary-20) !important; }
.border-primary\/30 { border-color: var(--primary-30) !important; }

/* Hover / focus variants (escaped selectors for utility-like classnames) */
.hover\:bg-primary\/90:hover { background-color: var(--primary-90) !important; }
.hover\:opacity-90:hover { opacity: .9 !important; }
.focus\:ring-primary:focus { box-shadow: 0 0 0 4px rgba(50,184,198,0.22) !important; }

/* Buttons and interactive elements */
button[class*="bg-primary"], a[class*="bg-primary"], input[class*="bg-primary"] {
  color: var(--primary-foreground) !important;
}

/* Accessible focus outlines */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--primary) !important;
  outline-offset: 3px !important;
}

/* Make sure icons using currentColor follow primary when text-primary is present */
.text-primary svg, .text-primary .material-symbols-outlined { color: var(--primary) !important; }

/* Small utility to ensure readable text on light primary backgrounds */
.bg-primary, .bg-primary\/10, .bg-primary\/20, .bg-primary\/30 { color: var(--primary-foreground) !important; }

/* Ensure forms focus state uses the primary color */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(50,184,198,0.15) !important;
  border-color: var(--primary) !important;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}