:root {
    --primary-900: #8038f1;
    --primary-800: #53378B;
    --primary-700: #E6306D;
    --primary-600: #633883;
    --primary-500: #7d49a1;
    --primary-400: #d6e1ff;
    --primary-200: #f2f2ff;
    --secondary-900: #1D2935;
    --secondary-800: #1D2935;
    --secondary-700: #53378B;
    --secondary-600: #3b648e;
    --secondary-500: #566a7d;
    --secondary-400: #1D2935;
    --secondary-300: #1D2935;
    --secondary-200: #1D2935;
    --tertiary: #45207e;
  }
  
  form #search {
    background: #f2f2ff;
    color: black;
  }
  form #search::placeholder {
    color: #black;
  }
  nav form svg.text-gray-400 {
    color: #eee;
  }
  
  form #search:focus {
    background: white;
    color: black;
  }
  form #search:focus::placeholder {
    color: gray;
  }
  
  nav form #search:focus + div > svg.text-gray-400 {
    color: gray;
  }
  
  nav a.text-primary-700 {
    color: var(--primary-900);
  }
  
  .hover\:border-primary-700:hover {
    border-color: #F29400 !important;
  }
  
  .hover\:text-primary-700:hover, .hover\:text-primary-700:hover > .group-hover\:text-primary-700 {
    color: #F29400 !important;
  }
  
  button.bg-primary-700 {
    background-color: #B1C903;
  }
  
  button.bg-primary-700:hover {
    background-color: #53378B;
  }

  span.bg-primary-700:has(> button.bg-primary-700) {
    background-color: #B1C903;
  }

  span.bg-primary-700:hover:has(> button.bg-primary-700) {
    background-color: #53378B;
  }
  span.border-primary-700:has(> button.bg-primary-700) {
    border: #B1C903;
  }