@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom color utility classes */

/* Background Colors */
.bg-lighthouse {
  background-color: #F3F4F4;
}

.bg-distant-cloud {
  background-color: #E5EAE6;
}

.bg-cocoon {
  background-color: #DEDBCC;
}

.bg-june-ivy {
  background-color: #416858;
}

.bg-teal-spill {
  background-color: #032425;
}

.bg-yellow-ace {
  background-color: #F1FF58;
}

/* Text Colors */
.text-lighthouse {
  color: #F3F4F4;
}

.text-distant-cloud {
  color: #E5EAE6;
}

.text-cocoon {
  color: #DEDBCC;
}

.text-june-ivy {
  color: #416858;
}

.text-teal-spill {
  color: #032425;
}

.text-yellow-ace {
  color: #F1FF58;
}

/* Border Colors */
.border-lighthouse {
  border-color: #F3F4F4;
}

.border-distant-cloud {
  border-color: #E5EAE6;
}

.border-cocoon {
  border-color: #DEDBCC;
}

.border-june-ivy {
  border-color: #416858;
}

.border-teal-spill {
  border-color: #032425;
}

.border-yellow-ace {
  border-color: #F1FF58;
}

/* Opacity Variants */
.bg-lighthouse\/10 { background-color: rgba(243, 244, 244, 0.1); }
.bg-lighthouse\/20 { background-color: rgba(243, 244, 244, 0.2); }
.bg-lighthouse\/30 { background-color: rgba(243, 244, 244, 0.3); }
.bg-lighthouse\/50 { background-color: rgba(243, 244, 244, 0.5); }
.bg-lighthouse\/90 { background-color: rgba(243, 244, 244, 0.9); }

.bg-distant-cloud\/10 { background-color: rgba(229, 234, 230, 0.1); }
.bg-distant-cloud\/20 { background-color: rgba(229, 234, 230, 0.2); }
.bg-distant-cloud\/30 { background-color: rgba(229, 234, 230, 0.3); }
.bg-distant-cloud\/50 { background-color: rgba(229, 234, 230, 0.5); }
.bg-distant-cloud\/90 { background-color: rgba(229, 234, 230, 0.9); }

.bg-cocoon\/10 { background-color: rgba(222, 219, 204, 0.1); }
.bg-cocoon\/20 { background-color: rgba(222, 219, 204, 0.2); }
.bg-cocoon\/30 { background-color: rgba(222, 219, 204, 0.3); }
.bg-cocoon\/50 { background-color: rgba(222, 219, 204, 0.5); }
.bg-cocoon\/90 { background-color: rgba(222, 219, 204, 0.9); }

.bg-june-ivy\/10 { background-color: rgba(65, 104, 88, 0.1); }
.bg-june-ivy\/20 { background-color: rgba(65, 104, 88, 0.2); }
.bg-june-ivy\/30 { background-color: rgba(65, 104, 88, 0.3); }
.bg-june-ivy\/50 { background-color: rgba(65, 104, 88, 0.5); }
.bg-june-ivy\/90 { background-color: rgba(65, 104, 88, 0.9); }

.bg-teal-spill\/10 { background-color: rgba(3, 36, 37, 0.1); }
.bg-teal-spill\/20 { background-color: rgba(3, 36, 37, 0.2); }
.bg-teal-spill\/30 { background-color: rgba(3, 36, 37, 0.3); }
.bg-teal-spill\/50 { background-color: rgba(3, 36, 37, 0.5); }
.bg-teal-spill\/90 { background-color: rgba(3, 36, 37, 0.9); }

.bg-yellow-ace\/10 { background-color: rgba(241, 255, 88, 0.1); }
.bg-yellow-ace\/20 { background-color: rgba(241, 255, 88, 0.2); }
.bg-yellow-ace\/30 { background-color: rgba(241, 255, 88, 0.3); }
.bg-yellow-ace\/50 { background-color: rgba(241, 255, 88, 0.5); }
.bg-yellow-ace\/90 { background-color: rgba(241, 255, 88, 0.9); }

.border-lighthouse\/10 { border-color: rgba(243, 244, 244, 0.1); }
.border-lighthouse\/20 { border-color: rgba(243, 244, 244, 0.2); }
.border-lighthouse\/30 { border-color: rgba(243, 244, 244, 0.3); }
.border-lighthouse\/50 { border-color: rgba(243, 244, 244, 0.5); }
.border-lighthouse\/90 { border-color: rgba(243, 244, 244, 0.9); }

.border-distant-cloud\/10 { border-color: rgba(229, 234, 230, 0.1); }
.border-distant-cloud\/20 { border-color: rgba(229, 234, 230, 0.2); }
.border-distant-cloud\/30 { border-color: rgba(229, 234, 230, 0.3); }
.border-distant-cloud\/50 { border-color: rgba(229, 234, 230, 0.5); }
.border-distant-cloud\/90 { border-color: rgba(229, 234, 230, 0.9); }

.border-cocoon\/10 { border-color: rgba(222, 219, 204, 0.1); }
.border-cocoon\/20 { border-color: rgba(222, 219, 204, 0.2); }
.border-cocoon\/30 { border-color: rgba(222, 219, 204, 0.3); }
.border-cocoon\/50 { border-color: rgba(222, 219, 204, 0.5); }
.border-cocoon\/90 { border-color: rgba(222, 219, 204, 0.9); }

.border-june-ivy\/10 { border-color: rgba(65, 104, 88, 0.1); }
.border-june-ivy\/20 { border-color: rgba(65, 104, 88, 0.2); }
.border-june-ivy\/30 { border-color: rgba(65, 104, 88, 0.3); }
.border-june-ivy\/50 { border-color: rgba(65, 104, 88, 0.5); }
.border-june-ivy\/90 { border-color: rgba(65, 104, 88, 0.9); }

.border-teal-spill\/10 { border-color: rgba(3, 36, 37, 0.1); }
.border-teal-spill\/20 { border-color: rgba(3, 36, 37, 0.2); }
.border-teal-spill\/30 { border-color: rgba(3, 36, 37, 0.3); }
.border-teal-spill\/50 { border-color: rgba(3, 36, 37, 0.5); }
.border-teal-spill\/90 { border-color: rgba(3, 36, 37, 0.9); }

.border-yellow-ace\/10 { border-color: rgba(241, 255, 88, 0.1); }
.border-yellow-ace\/20 { border-color: rgba(241, 255, 88, 0.2); }
.border-yellow-ace\/30 { border-color: rgba(241, 255, 88, 0.3); }
.border-yellow-ace\/50 { border-color: rgba(241, 255, 88, 0.5); }
.border-yellow-ace\/90 { border-color: rgba(241, 255, 88, 0.9); }

.border-teabag\/10 { border-color: rgba(114, 98, 89, 0.1); }
.border-teabag\/20 { border-color: rgba(114, 98, 89, 0.2); }
.border-teabag\/30 { border-color: rgba(114, 98, 89, 0.3); }

.hover\:bg-teabag:hover { background-color: #726259; }
.hover\:bg-teabag\/90:hover { background-color: rgba(114, 98, 89, 0.9); }

.hover\:bg-protonred:hover { background-color: #840804; }
.hover\:bg-protonred\/90:hover { background-color: rgba(132, 8, 4, 0.9); }

.hover\:bg-nyctaxi:hover { background-color: #F7B732; }
.hover\:bg-nyctaxi\/90:hover { background-color: rgba(247, 183, 50, 0.9); }

.hover\:bg-cocoon:hover { background-color: #DEDBCC; }
.hover\:bg-distant-cloud:hover { background-color: #E5EAE6; }
.hover\:bg-yellow-ace:hover { background-color: #F1FF58; }

.hover\:text-yellow-ace:hover { color: #F1FF58; }
.hover\:text-lighthouse:hover { color: #F3F4F4; }
.hover\:text-teal-spill:hover { color: #032425; }
.hover\:text-june-ivy:hover { color: #416858; }

.hover\:border-yellow-ace:hover { border-color: #F1FF58; }
.hover\:border-cocoon:hover { border-color: #DEDBCC; }
