/**
 * faeed brand palette — primary #009890
 *
 * Static overrides for the green/teal Tailwind utilities used across the site.
 * Loaded AFTER the Tailwind CDN script so these rules win (each selector is
 * prefixed with `html` to outrank the CDN's runtime-generated styles).
 */

:root {
    --faeed-50:  #f2fbfb;
    --faeed-100: #d5f2f0;
    --faeed-200: #abe5e1;
    --faeed-300: #74d2cc;
    --faeed-400: #33bcb4;
    --faeed-500: #009890;
    --faeed-600: #008c86;
    --faeed-700: #00736e;
    --faeed-800: #005c58;
    --faeed-900: #004a47;
}

/* ---------- background ---------- */
html .bg-green-50    { background-color: var(--faeed-50); }
html .bg-green-100   { background-color: var(--faeed-100); }
html .bg-green-500   { background-color: var(--faeed-500); }
html .bg-green-600   { background-color: var(--faeed-600); }
html .bg-green-700   { background-color: var(--faeed-700); }
html .bg-green-800   { background-color: var(--faeed-800); }

html .bg-green-50\/30   { background-color: rgba(242, 251, 251, 0.3); }
html .bg-green-100\/50  { background-color: rgba(213, 242, 240, 0.5); }
html .bg-green-600\/10  { background-color: rgba(0, 140, 134, 0.1); }
html .bg-green-700\/10  { background-color: rgba(0, 115, 110, 0.1); }
html .bg-green-800\/40  { background-color: rgba(0, 92, 88, 0.4); }
html .bg-green-800\/60  { background-color: rgba(0, 92, 88, 0.6); }

/* ---------- text ---------- */
html .text-green-50   { color: var(--faeed-50); }
html .text-green-100  { color: var(--faeed-100); }
html .text-green-500  { color: var(--faeed-500); }
html .text-green-600  { color: var(--faeed-600); }
html .text-green-700  { color: var(--faeed-700); }
html .text-green-800  { color: var(--faeed-800); }
html .text-green-900  { color: var(--faeed-900); }

/* ---------- border / ring / accent ---------- */
html .border-green-100 { border-color: var(--faeed-100); }
html .border-green-200 { border-color: var(--faeed-200); }
html .border-green-300 { border-color: var(--faeed-300); }
html .border-green-500 { border-color: var(--faeed-500); }
html .border-green-600 { border-color: var(--faeed-600); }

html .ring-green-200 { --tw-ring-color: var(--faeed-200); }
html .ring-green-500 { --tw-ring-color: var(--faeed-500); }
html .ring-green-600 { --tw-ring-color: var(--faeed-600); }

html .accent-green-600 { accent-color: var(--faeed-600); }

/* ---------- hover / focus states ---------- */
html .hover\:bg-green-50:hover   { background-color: var(--faeed-50); }
html .hover\:bg-green-100:hover  { background-color: var(--faeed-100); }
html .hover\:bg-green-600:hover  { background-color: var(--faeed-700); }
html .hover\:bg-green-700:hover  { background-color: var(--faeed-800); }
html .hover\:bg-green-800:hover  { background-color: var(--faeed-900); }
html .hover\:bg-green-800\/60:hover { background-color: rgba(0, 92, 88, 0.6); }

html .hover\:text-green-600:hover { color: var(--faeed-600); }
html .hover\:text-green-700:hover { color: var(--faeed-700); }
html .hover\:text-green-800:hover { color: var(--faeed-800); }

html .hover\:border-green-200:hover { border-color: var(--faeed-200); }
html .hover\:border-green-500:hover { border-color: var(--faeed-500); }

html .focus\:border-green-500:focus { border-color: var(--faeed-500); }
html .focus\:ring-green-200:focus   { --tw-ring-color: var(--faeed-200); }
html .focus\:ring-green-500:focus   { --tw-ring-color: var(--faeed-500); }

/* ---------- gradients ---------- */
html .from-green-700 {
    --tw-gradient-from: var(--faeed-700) var(--tw-gradient-from-position);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html .via-green-600 {
    --tw-gradient-via: var(--faeed-600) var(--tw-gradient-via-position);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--faeed-600) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html .to-teal-600 {
    --tw-gradient-to: var(--faeed-600) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, transparent), var(--tw-gradient-to);
}

/* ---------- file inputs ---------- */
html .file\:bg-green-50::file-selector-button { background-color: var(--faeed-50); }
html .file\:text-green-700::file-selector-button { color: var(--faeed-700); }
html .hover\:file\:bg-green-100:hover::file-selector-button { background-color: var(--faeed-100); }