/*
 * WatPur Tailwind Supplementary Styles
 * Custom color utilities for the WatPur brand palette
 */

/* === CUSTOM COLOR UTILITIES === */
/* Primary (#00A896) */
.bg-primary { background-color: #00A896; }
.text-primary { color: #00A896; }
.border-primary { border-color: #00A896; }
.from-primary { --tw-gradient-from: #00A896 var(--tw-gradient-from-position); }
.to-primary { --tw-gradient-to: #00A896 var(--tw-gradient-to-position); }
.hover\:bg-primary:hover { background-color: #00A896; }
.hover\:text-primary:hover { color: #00A896; }
.hover\:border-primary:hover { border-color: #00A896; }
.focus\:ring-primary:focus { --tw-ring-color: #00A896; }
.group-hover\:text-primary:hover { color: #00A896; }
.bg-primary\/10 { background-color: rgba(0, 168, 150, 0.1); }
.bg-primary\/20 { background-color: rgba(0, 168, 150, 0.2); }
.bg-primary\/5 { background-color: rgba(0, 168, 150, 0.05); }
.bg-primary\/75 { background-color: rgba(0, 168, 150, 0.75); }
.text-primary\/80 { color: rgba(0, 168, 150, 0.8); }
.shadow-primary\/20 { --tw-shadow-color: rgba(0, 168, 150, 0.2); }
.hover\:bg-primary\/90:hover { background-color: rgba(0, 168, 150, 0.9); }
.hover\:bg-primary\/20:hover { background-color: rgba(0, 168, 150, 0.2); }
.border-primary\/10 { border-color: rgba(0, 168, 150, 0.1); }
.border-primary\/20 { border-color: rgba(0, 168, 150, 0.2); }
.focus-within\:border-primary\/30:focus-within { border-color: rgba(0, 168, 150, 0.3); }
.focus-within\:ring-primary\/50:focus-within { --tw-ring-color: rgba(0, 168, 150, 0.5); }
.focus\:border-primary:focus { border-color: #00A896; }
.focus\:border-primary\/30:focus { border-color: rgba(0, 168, 150, 0.3); }
.focus\:ring-primary\/50:focus { --tw-ring-color: rgba(0, 168, 150, 0.5); }
.group-hover\:bg-primary\/\[0\.07\]:hover { background-color: rgba(0, 168, 150, 0.07); }

/* Secondary (#05668D) */
.bg-secondary { background-color: #05668D; }
.text-secondary { color: #05668D; }
.from-secondary { --tw-gradient-from: #05668D var(--tw-gradient-from-position); }
.to-secondary { --tw-gradient-to: #05668D var(--tw-gradient-to-position); }
.hover\:bg-secondary:hover { background-color: #05668D; }
.bg-secondary\/10 { background-color: rgba(5, 102, 141, 0.1); }
.bg-secondary\/5 { background-color: rgba(5, 102, 141, 0.05); }
.border-secondary\/10 { border-color: rgba(5, 102, 141, 0.1); }
.shadow-secondary\/20 { --tw-shadow-color: rgba(5, 102, 141, 0.2); }
.group-hover\:bg-secondary\/\[0\.07\]:hover { background-color: rgba(5, 102, 141, 0.07); }

/* Accent (#028090) */
.text-accent { color: #028090; }
.bg-accent { background-color: #028090; }

/* Neutral (#F0F3BD) */
.bg-neutral { background-color: #F0F3BD; }
.hover\:bg-neutral:hover { background-color: #F0F3BD; }

/* Dark (#023E8A) */
.to-dark { --tw-gradient-to: #023E8A var(--tw-gradient-to-position); }

/* CTA (#F45B69) */
.bg-cta { background-color: #F45B69; }
.text-cta { color: #F45B69; }
.from-cta { --tw-gradient-from: #F45B69 var(--tw-gradient-from-position); }
.bg-cta\/10 { background-color: rgba(244, 91, 105, 0.1); }

/* CTA Dark (#D94552) */
.bg-cta-dark { background-color: #D94552; }
.text-cta-dark { color: #D94552; }

/* Warm (#FFF5F0) */
.bg-warm { background-color: #FFF5F0; }

/* Surface (#F8FAFB) */
.bg-surface { background-color: #F8FAFB; }

/* === ARBITRARY VALUE UTILITIES === */
/* These are not captured by Tailwind's standard utility generation */
.bg-\[\#FF4500\] { background-color: #FF4500; }
.hover\:bg-\[\#CC3700\]:hover { background-color: #CC3700; }
.shadow-\[0_4px_15px_rgba\(255\,69\,0\,0\.4\)\] { box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4); }
.hover\:shadow-\[0_8px_30px_-8px_rgba\(0\,168\,150\,0\.15\)\]:hover { box-shadow: 0 8px 30px -8px rgba(0, 168, 150, 0.15); }
.shadow-\[0_2px_20px_-6px_rgba\(0\,0\,0\,0\.06\)\] { box-shadow: 0 2px 20px -6px rgba(0, 0, 0, 0.06); }
.shadow-\[0_4px_24px_-6px_rgba\(0\,0\,0\,0\.06\)\] { box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.06); }
.hover\:shadow-\[0_8px_30px_-8px_rgba\(0\,168\,150\,0\.15\)\]:hover { box-shadow: 0 8px 30px -8px rgba(0, 168, 150, 0.15); }

/* Clamp text sizes */
.text-\[clamp\(2rem\,5vw\,3\.5rem\)\] { font-size: clamp(2rem, 5vw, 3.5rem); }
.text-\[clamp\(1\.5rem\,3vw\,2\.5rem\)\] { font-size: clamp(1.5rem, 3vw, 2.5rem); }
.text-\[clamp\(0\.9rem\,1\.5vw\,1\.1rem\)\] { font-size: clamp(0.9rem, 1.5vw, 1.1rem); }
.text-\[clamp\(1rem\,2vw\,1\.25rem\)\] { font-size: clamp(1rem, 2vw, 1.25rem); }
.text-\[clamp\(2\.5rem\,6vw\,4\.5rem\)\] { font-size: clamp(2.5rem, 6vw, 4.5rem); }

/* Arbitrary sizes */
.h-\[256px\] { height: 256px; }
.h-\[60vh\] { height: 60vh; }
.min-h-\[300px\] { min-height: 300px; }
.max-h-\[65vh\] { max-height: 65vh; }
.max-h-\[75vh\] { max-height: 75vh; }
.max-w-\[260px\] { max-width: 260px; }
.px-\[30px\] { padding-left: 30px; padding-right: 30px; }
.lg\:w-\[55\%\] { width: 55%; }
.text-\[10px\] { font-size: 10px; }

/* Responsive utilities used with sm: prefix */
.sm\:h-\[70vh\] { height: 70vh; }