/* medical-theme.css
 * Tailwind utility overrides for the medical rebrand.
 *
 * The pre-built main.css from the original AIT Store only contains the
 * classes that were used before (blue / indigo / slate). When the site was
 * rebranded to use emerald/teal, those classes don't exist in main.css and
 * are silently ignored by the browser — buttons end up unstyled (browser
 * default = white).
 *
 * This file fills in the missing emerald/teal utilities with the official
 * Tailwind v3 color values. Loaded AFTER main.css so its rules win.
 */

:root {
  --emerald-50:  236 253 245;
  --emerald-100: 209 250 229;
  --emerald-200: 167 243 208;
  --emerald-300: 110 231 183;
  --emerald-400:  52 211 153;
  --emerald-500:  16 185 129;
  --emerald-600:   5 150 105;
  --emerald-700:   4 120  87;
  --emerald-800:   6  95  70;
  --emerald-900:   6  78  59;
  --teal-50:     240 253 250;
  --teal-100:    204 251 241;
  --teal-200:    153 246 228;
  --teal-300:     94 234 212;
  --teal-400:     45 212 191;
  --teal-500:     20 184 166;
  --teal-600:     13 148 136;
  --teal-700:     15 118 110;
  --teal-800:     17  94  89;
  --teal-900:     19  78  74;
}

/* ---------- Background ---------- */
.bg-emerald-50   { background-color: rgb(var(--emerald-50)); }
.bg-emerald-100  { background-color: rgb(var(--emerald-100)); }
.bg-emerald-600  { background-color: rgb(var(--emerald-600)); }
.bg-emerald-700  { background-color: rgb(var(--emerald-700)); }
.bg-emerald-800  { background-color: rgb(var(--emerald-800)); }
.bg-emerald-50\/50 { background-color: rgb(var(--emerald-50) / 0.5); }
.bg-teal-50      { background-color: rgb(var(--teal-50)); }

.hover\:bg-emerald-50\/50:hover { background-color: rgb(var(--emerald-50) / 0.5); }
.hover\:bg-emerald-700:hover    { background-color: rgb(var(--emerald-700)); }
.hover\:bg-emerald-800:hover    { background-color: rgb(var(--emerald-800)); }

/* ---------- Text ---------- */
.text-emerald-600 { color: rgb(var(--emerald-600)); }
.text-emerald-700 { color: rgb(var(--emerald-700)); }
.text-emerald-800 { color: rgb(var(--emerald-800)); }
.text-emerald-900 { color: rgb(var(--emerald-900)); }
.text-teal-700    { color: rgb(var(--teal-700)); }
.text-teal-900    { color: rgb(var(--teal-900)); }

.hover\:text-emerald-600:hover { color: rgb(var(--emerald-600)); }
.hover\:text-emerald-800:hover { color: rgb(var(--emerald-800)); }
.hover\:text-emerald-900:hover { color: rgb(var(--emerald-900)); }
.hover\:text-teal-900:hover    { color: rgb(var(--teal-900)); }

/* ---------- Border ---------- */
.border-emerald-400 { border-color: rgb(var(--emerald-400)); }
.border-emerald-500 { border-color: rgb(var(--emerald-500)); }
.border-emerald-600 { border-color: rgb(var(--emerald-600)); }

.hover\:border-emerald-400:hover { border-color: rgb(var(--emerald-400)); }
.focus\:border-emerald-500:focus { border-color: rgb(var(--emerald-500)); }

/* ---------- Ring (focus) ---------- */
.focus\:ring-emerald-500:focus {
  --tw-ring-color: rgb(var(--emerald-500) / 0.5);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* ---------- Shadow ---------- */
.shadow-emerald-600\/20 {
  --tw-shadow-color: rgb(var(--emerald-600) / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-emerald-700\/30 {
  --tw-shadow-color: rgb(var(--emerald-700) / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

/* ---------- Gradients (bg-gradient-to-br from-X via-Y to-Z) ---------- */
.from-emerald-600 { --tw-gradient-from: rgb(var(--emerald-600)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.via-emerald-700  { --tw-gradient-via: rgb(var(--emerald-700));  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) calc(var(--tw-gradient-via-position) / 100 * (var(--tw-gradient-to-position) - var(--tw-gradient-from-position)) + var(--tw-gradient-from-position)), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
.via-emerald-900  { --tw-gradient-via: rgb(var(--emerald-900));  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) calc(var(--tw-gradient-via-position) / 100 * (var(--tw-gradient-to-position) - var(--tw-gradient-from-position)) + var(--tw-gradient-from-position)), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
.to-teal-700      { --tw-gradient-to: rgb(var(--teal-700));      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-teal-900      { --tw-gradient-to: rgb(var(--teal-900));      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

/* Border + border-t-transparent for spinners (already covered by main.css but explicit here) */
.border-t-transparent { border-top-color: transparent; }