/* Tailwind v3 Extras - classes missing from v2 base CSS */

/* ====================== EMERALD COLORS ====================== */
.text-emerald-50{color:#ecfdf5}
.text-emerald-100{color:#d1fae5}
.text-emerald-200{color:#a7f3d0}
.text-emerald-300{color:#6ee7b7}
.text-emerald-400{color:#34d399}
.text-emerald-500{color:#10b981}
.text-emerald-600{color:#059669}
.text-emerald-700{color:#047857}
.text-emerald-800{color:#065f46}
.text-emerald-900{color:#064e3b}
.bg-emerald-50{background-color:#ecfdf5}
.bg-emerald-100{background-color:#d1fae5}
.bg-emerald-200{background-color:#a7f3d0}
.bg-emerald-300{background-color:#6ee7b7}
.bg-emerald-400{background-color:#34d399}
.bg-emerald-500{background-color:#10b981}
.bg-emerald-600{background-color:#059669}
.bg-emerald-700{background-color:#047857}
.bg-emerald-800{background-color:#065f46}
.bg-emerald-900{background-color:#064e3b}
.border-emerald-50{border-color:#ecfdf5}
.border-emerald-100{border-color:#d1fae5}
.border-emerald-200{border-color:#a7f3d0}
.border-emerald-300{border-color:#6ee7b7}
.border-emerald-500{border-color:#10b981}
.border-emerald-600{border-color:#059669}
.from-emerald-50{--tw-gradient-from:#ecfdf5;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(236,253,245,0))}
.from-emerald-100{--tw-gradient-from:#d1fae5;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(209,250,229,0))}
.from-emerald-500{--tw-gradient-from:#10b981;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(16,185,129,0))}
.from-emerald-600{--tw-gradient-from:#059669;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(5,150,105,0))}
.to-emerald-50{--tw-gradient-to:#ecfdf5}
.to-emerald-100{--tw-gradient-to:#d1fae5}
.to-emerald-200{--tw-gradient-to:#a7f3d0}
.to-emerald-600{--tw-gradient-to:#059669}
.to-emerald-700{--tw-gradient-to:#047857}
.to-teal-50{--tw-gradient-to:#f0fdfa}
.to-teal-600{--tw-gradient-to:#0d9488}
.from-teal-50{--tw-gradient-from:#f0fdfa;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(240,253,250,0))}
.hover\:bg-emerald-600:hover{background-color:#059669}
.hover\:bg-emerald-700:hover{background-color:#047857}
.hover\:text-emerald-600:hover{color:#059669}
.hover\:text-emerald-700:hover{color:#047857}
.focus\:ring-emerald-500:focus{--tw-ring-color:rgba(16,185,129,0.5)}

/* ====================== SKY / SLATE COLORS ====================== */
.text-sky-600{color:#0284c7}
.text-sky-700{color:#0369a1}
.bg-sky-100{background-color:#e0f2fe}
.bg-slate-50{background-color:#f8fafc}
.bg-slate-700{background-color:#334155}
.bg-slate-800{background-color:#1e293b}
.bg-slate-900{background-color:#0f172a}
.text-slate-100{color:#f1f5f9}
.text-slate-200{color:#e2e8f0}
.text-slate-300{color:#cbd5e1}
.border-slate-700{border-color:#334155}

/* ====================== GAP UTILITIES ====================== */
.gap-0{gap:0}
.gap-1{gap:0.25rem}
.gap-1\.5{gap:0.375rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}
.gap-x-2{column-gap:0.5rem}
.gap-x-4{column-gap:1rem}
.gap-y-2{row-gap:0.5rem}
.gap-y-4{row-gap:1rem}

/* ====================== ASPECT RATIO ====================== */
.aspect-video{aspect-ratio:16/9}
.aspect-square{aspect-ratio:1/1}
.aspect-auto{aspect-ratio:auto}

/* ====================== BACKDROP BLUR ====================== */
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.backdrop-blur-lg{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ====================== LINE CLAMP ====================== */
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ====================== TRANSLATE ====================== */
.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(-50%,var(--tw-translate-y,0))}
.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x,0),-50%)}
.translate-x-1\/2{--tw-translate-x:50%;transform:translate(50%,var(--tw-translate-y,0))}
.translate-y-1\/2{--tw-translate-y:50%;transform:translate(var(--tw-translate-x,0),50%)}

/* ====================== GROUP HOVER ====================== */
.group:hover .group-hover\:translate-x-1{transform:translate(0.25rem,0)}
.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.group:hover .group-hover\:scale-110{transform:scale(1.10)}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:visible{visibility:visible}
.group:hover .group-hover\:bg-green-50{background-color:#f0fdf4}
.group:hover .group-hover\:border-green-200{border-color:#bbf7d0}
.group:hover .group-hover\:text-green-600{color:#16a34a}
.group:hover .group-hover\:text-green-700{color:#15803d}
.group-open\:rotate-180{transform:rotate(0)}
details[open] .group-open\:rotate-180{transform:rotate(180deg)}

/* ====================== MAX WIDTH ====================== */
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}

/* ====================== LETTER SPACING ====================== */
.tracking-tight{letter-spacing:-0.025em}
.tracking-wide{letter-spacing:0.025em}
.tracking-wider{letter-spacing:0.05em}

/* ====================== INSET / POSITIONING ====================== */
.inset-0{top:0;right:0;bottom:0;left:0}
.inset-y-0{top:0;bottom:0}
.inset-x-0{left:0;right:0}

/* ====================== OUTLINE / FOCUS RING ====================== */
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(59,130,246,0.5)}
.focus\:ring-4:focus{box-shadow:0 0 0 4px rgba(59,130,246,0.5)}
.focus\:ring-green-500\/30:focus{box-shadow:0 0 0 4px rgba(34,197,94,0.3)}
.focus\:ring-white\/30:focus{box-shadow:0 0 0 4px rgba(255,255,255,0.3)}

/* ====================== Z-INDEX EXTRAS ====================== */
.z-\[80\]{z-index:80}
.z-\[90\]{z-index:90}
.z-\[100\]{z-index:100}

/* ====================== MIN/MAX HEIGHT ====================== */
.min-h-screen{min-height:100vh}

/* ====================== EXTRA COLOR SHADES ====================== */
.text-green-300{color:#86efac}
.text-green-400{color:#4ade80}

/* ====================== FRACTIONAL WIDTHS ====================== */
.w-2\/3{width:66.666667%}
.w-1\/3{width:33.333333%}

/* ====================== SPACE BETWEEN ====================== */
.space-y-1>:not([hidden])~:not([hidden]){margin-top:0.25rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:0.5rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:0.75rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
.space-y-8>:not([hidden])~:not([hidden]){margin-top:2rem}
.space-x-2>:not([hidden])~:not([hidden]){margin-left:0.5rem}
.space-x-3>:not([hidden])~:not([hidden]){margin-left:0.75rem}
.space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}
.space-x-6>:not([hidden])~:not([hidden]){margin-left:1.5rem}

/* ====================== DARK MODE (CLASS STRATEGY) ====================== */
html.dark{color-scheme:dark}
html.dark body{background-color:#0b1220;color:#d4dae4}
html.dark .bg-white{background-color:#131c2e}
html.dark .bg-gray-50{background-color:#0b1220}
html.dark .bg-gray-100{background-color:#1e2a42}
html.dark .text-gray-700{color:#cbd5e1}
html.dark .text-gray-800{color:#e2e8f0}
html.dark .text-gray-900{color:#f1f5f9}
html.dark .border-gray-100{border-color:#2a3753}
html.dark .border-gray-200{border-color:#2a3753}

/* ====================== CUSTOM BRAND UTILITIES ====================== */
.gradient-text{background:linear-gradient(135deg,#10b981 0%,#059669 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gradient-bg{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}

/* ====================== TRANSITIONS ====================== */
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}

/* ====================== SMOOTH IMAGE (custom) ====================== */
.smooth-image{opacity:0;transition:opacity 0.5s ease}
.smooth-image.image-loaded{opacity:1}
img:not(.smooth-image){opacity:1}