@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

/* Search match highlighting --------------------------------------------- */

/* Meilisearch returns matches wrapped in <em>. We strip italics and add a
   yellow background so they really pop in both list and detail. */
.search-highlight em,
.search-highlight em * {
  font-style: normal;
  background-color: #fde68a;
  color: #78350f;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
  box-shadow: 0 0 0 1px #f59e0b inset;
}

.dark .search-highlight em,
.dark .search-highlight em * {
  background-color: #78350f;
  color: #fde68a;
  box-shadow: 0 0 0 1px #f59e0b inset;
}

/* Client-side highlights inside the detail body. */
mark.search-match {
  background-color: #fdff32;
  color: #000;
  padding: 2px;
  border-radius: 2px;
  font-weight: 600;
  box-shadow: 0 0 0 1px #e9ff32 inset;
}

.dark mark.search-match {
  background-color: #fdff32;
  color: #000;
  box-shadow: 0 0 0 1px #e9ff32 inset;
}

/* The currently-focused match (the one the user navigated to). */
mark.search-match.is-current {
  background-color: #8cff32;
  padding: 2px;
  color: #000;
  box-shadow: 0 0 0 2px #8cff32 inset;
  animation: search-match-pulse 0.9s ease-out 1;
}

.dark mark.search-match.is-current {
  background-color: #ea580c;
  color: #fff7ed;
  box-shadow: 0 0 0 2px #fdba74 inset;
}

@keyframes search-match-pulse {
  0%   { box-shadow: 0 0 0 0 #e9ff32, 0 0 0 2px #8cff32 inset; }
  70%  { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0), 0 0 0 2px #8cff32 inset; }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0), 0 0 0 2px #8cff32 inset; }
}