/* Flat UI Color Utility Classes */

/* Background Colors */
.bg-turquoise { background-color: var(--color-turquoise); }
.bg-emerald { background-color: var(--color-emerald); }
.bg-peter-river { background-color: var(--color-peter-river); }
.bg-amethyst { background-color: var(--color-amethyst); }
.bg-wet-asphalt { background-color: var(--color-wet-asphalt); }
.bg-green-sea { background-color: var(--color-green-sea); }
.bg-nephritis { background-color: var(--color-nephritis); }
.bg-belize-hole { background-color: var(--color-belize-hole); }
.bg-wisteria { background-color: var(--color-wisteria); }
.bg-midnight-blue { background-color: var(--color-midnight-blue); }
.bg-sun-flower { background-color: var(--color-sun-flower); }
.bg-carrot { background-color: var(--color-carrot); }
.bg-alizarin { background-color: var(--color-alizarin); }
.bg-clouds { background-color: var(--color-clouds); }
.bg-concrete { background-color: var(--color-concrete); }
.bg-orange { background-color: var(--color-orange); }
.bg-pumpkin { background-color: var(--color-pumpkin); }
.bg-pomegranate { background-color: var(--color-pomegranate); }
.bg-silver { background-color: var(--color-silver); }
.bg-asbestos { background-color: var(--color-asbestos); }

/* Text Colors */
.text-turquoise { color: var(--color-turquoise); }
.text-emerald { color: var(--color-emerald); }
.text-peter-river { color: var(--color-peter-river); }
.text-amethyst { color: var(--color-amethyst); }
.text-wet-asphalt { color: var(--color-wet-asphalt); }
.text-green-sea { color: var(--color-green-sea); }
.text-nephritis { color: var(--color-nephritis); }
.text-belize-hole { color: var(--color-belize-hole); }
.text-wisteria { color: var(--color-wisteria); }
.text-midnight-blue { color: var(--color-midnight-blue); }
.text-sun-flower { color: var(--color-sun-flower); }
.text-carrot { color: var(--color-carrot); }
.text-alizarin { color: var(--color-alizarin); }
.text-clouds { color: var(--color-clouds); }
.text-concrete { color: var(--color-concrete); }
.text-orange { color: var(--color-orange); }
.text-pumpkin { color: var(--color-pumpkin); }
.text-pomegranate { color: var(--color-pomegranate); }
.text-silver { color: var(--color-silver); }
.text-asbestos { color: var(--color-asbestos); }

/* Border Colors */
.border-turquoise { border-color: var(--color-turquoise); }
.border-emerald { border-color: var(--color-emerald); }
.border-peter-river { border-color: var(--color-peter-river); }
.border-amethyst { border-color: var(--color-amethyst); }
.border-wet-asphalt { border-color: var(--color-wet-asphalt); }
.border-green-sea { border-color: var(--color-green-sea); }
.border-nephritis { border-color: var(--color-nephritis); }
.border-belize-hole { border-color: var(--color-belize-hole); }
.border-wisteria { border-color: var(--color-wisteria); }
.border-midnight-blue { border-color: var(--color-midnight-blue); }
.border-sun-flower { border-color: var(--color-sun-flower); }
.border-carrot { border-color: var(--color-carrot); }
.border-alizarin { border-color: var(--color-alizarin); }
.border-clouds { border-color: var(--color-clouds); }
.border-concrete { border-color: var(--color-concrete); }
.border-orange { border-color: var(--color-orange); }
.border-pumpkin { border-color: var(--color-pumpkin); }
.border-pomegranate { border-color: var(--color-pomegranate); }
.border-silver { border-color: var(--color-silver); }
.border-asbestos { border-color: var(--color-asbestos); }

/* Hover States */
.hover\:bg-turquoise:hover { background-color: var(--color-turquoise); }
.hover\:bg-emerald:hover { background-color: var(--color-emerald); }
.hover\:bg-peter-river:hover { background-color: var(--color-peter-river); }
.hover\:bg-amethyst:hover { background-color: var(--color-amethyst); }
.hover\:bg-wet-asphalt:hover { background-color: var(--color-wet-asphalt); }
.hover\:bg-green-sea:hover { background-color: var(--color-green-sea); }
.hover\:bg-nephritis:hover { background-color: var(--color-nephritis); }
.hover\:bg-belize-hole:hover { background-color: var(--color-belize-hole); }
.hover\:bg-wisteria:hover { background-color: var(--color-wisteria); }
.hover\:bg-midnight-blue:hover { background-color: var(--color-midnight-blue); }
.hover\:bg-sun-flower:hover { background-color: var(--color-sun-flower); }
.hover\:bg-carrot:hover { background-color: var(--color-carrot); }
.hover\:bg-alizarin:hover { background-color: var(--color-alizarin); }
.hover\:bg-clouds:hover { background-color: var(--color-clouds); }
.hover\:bg-concrete:hover { background-color: var(--color-concrete); }
.hover\:bg-orange:hover { background-color: var(--color-orange); }
.hover\:bg-pumpkin:hover { background-color: var(--color-pumpkin); }
.hover\:bg-pomegranate:hover { background-color: var(--color-pomegranate); }
.hover\:bg-silver:hover { background-color: var(--color-silver); }
.hover\:bg-asbestos:hover { background-color: var(--color-asbestos); }

.hover\:text-turquoise:hover { color: var(--color-turquoise); }
.hover\:text-emerald:hover { color: var(--color-emerald); }
.hover\:text-peter-river:hover { color: var(--color-peter-river); }
.hover\:text-amethyst:hover { color: var(--color-amethyst); }
.hover\:text-wet-asphalt:hover { color: var(--color-wet-asphalt); }
.hover\:text-green-sea:hover { color: var(--color-green-sea); }
.hover\:text-nephritis:hover { color: var(--color-nephritis); }
.hover\:text-belize-hole:hover { color: var(--color-belize-hole); }
.hover\:text-wisteria:hover { color: var(--color-wisteria); }
.hover\:text-midnight-blue:hover { color: var(--color-midnight-blue); }
.hover\:text-sun-flower:hover { color: var(--color-sun-flower); }
.hover\:text-carrot:hover { color: var(--color-carrot); }
.hover\:text-alizarin:hover { color: var(--color-alizarin); }
.hover\:text-clouds:hover { color: var(--color-clouds); }
.hover\:text-concrete:hover { color: var(--color-concrete); }
.hover\:text-orange:hover { color: var(--color-orange); }
.hover\:text-pumpkin:hover { color: var(--color-pumpkin); }
.hover\:text-pomegranate:hover { color: var(--color-pomegranate); }
.hover\:text-silver:hover { color: var(--color-silver); }
.hover\:text-asbestos:hover { color: var(--color-asbestos); }

/* Focus States */
.focus\:ring-turquoise:focus { --tw-ring-color: var(--color-turquoise); }
.focus\:ring-emerald:focus { --tw-ring-color: var(--color-emerald); }
.focus\:ring-peter-river:focus { --tw-ring-color: var(--color-peter-river); }
.focus\:ring-amethyst:focus { --tw-ring-color: var(--color-amethyst); }
.focus\:ring-wet-asphalt:focus { --tw-ring-color: var(--color-wet-asphalt); }
.focus\:ring-green-sea:focus { --tw-ring-color: var(--color-green-sea); }
.focus\:ring-nephritis:focus { --tw-ring-color: var(--color-nephritis); }
.focus\:ring-belize-hole:focus { --tw-ring-color: var(--color-belize-hole); }
.focus\:ring-wisteria:focus { --tw-ring-color: var(--color-wisteria); }
.focus\:ring-midnight-blue:focus { --tw-ring-color: var(--color-midnight-blue); }
.focus\:ring-sun-flower:focus { --tw-ring-color: var(--color-sun-flower); }
.focus\:ring-carrot:focus { --tw-ring-color: var(--color-carrot); }
.focus\:ring-alizarin:focus { --tw-ring-color: var(--color-alizarin); }
.focus\:ring-clouds:focus { --tw-ring-color: var(--color-clouds); }
.focus\:ring-concrete:focus { --tw-ring-color: var(--color-concrete); }
.focus\:ring-orange:focus { --tw-ring-color: var(--color-orange); }
.focus\:ring-pumpkin:focus { --tw-ring-color: var(--color-pumpkin); }
.focus\:ring-pomegranate:focus { --tw-ring-color: var(--color-pomegranate); }
.focus\:ring-silver:focus { --tw-ring-color: var(--color-silver); }
.focus\:ring-asbestos:focus { --tw-ring-color: var(--color-asbestos); }

/* Dark mode opacity variations */
.dark\:bg-alizarin\/20:is(.dark *) { background-color: rgb(231 76 60 / 0.2); }
.dark\:bg-emerald\/20:is(.dark *) { background-color: rgb(46 204 113 / 0.2); }
.dark\:bg-peter-river\/20:is(.dark *) { background-color: rgb(52 152 219 / 0.2); }
.dark\:bg-sun-flower\/20:is(.dark *) { background-color: rgb(241 196 15 / 0.2); }
.dark\:bg-amethyst\/20:is(.dark *) { background-color: rgb(155 89 182 / 0.2); }
.dark\:bg-wet-asphalt\/20:is(.dark *) { background-color: rgb(52 73 94 / 0.2); }

/* Light mode opacity variations */
.bg-alizarin\/10 { background-color: rgb(231 76 60 / 0.1); }
.bg-emerald\/10 { background-color: rgb(46 204 113 / 0.1); }
.bg-peter-river\/10 { background-color: rgb(52 152 219 / 0.1); }
.bg-sun-flower\/10 { background-color: rgb(241 196 15 / 0.1); }
.bg-amethyst\/10 { background-color: rgb(155 89 182 / 0.1); }
.bg-wet-asphalt\/10 { background-color: rgb(52 73 94 / 0.1); }