:root {
    --color-primary: #3c5120;

    /* primary color variants */
    --color-primary-50: color-mix(in srgb, #3c5120 5%, white);
    --color-primary-100: color-mix(in srgb, #3c5120 10%, white);
    --color-primary-200: color-mix(in srgb, #3c5120 30%, white);
    --color-primary-300: color-mix(in srgb, #3c5120 50%, white);
    --color-primary-400: color-mix(in srgb, #3c5120 70%, white);
    --color-primary-500: #3c5120;
    --color-primary-600: color-mix(in srgb, #3c5120 70%, black);
    --color-primary-700: color-mix(in srgb, #3c5120 50%, black);
    --color-primary-800: color-mix(in srgb, #3c5120 30%, black);
    --color-primary-900: color-mix(in srgb, #3c5120 10%, black);

    --color-secondary: #3c5120;

    /* secondary color variants */
    --color-secondary-50: color-mix(in srgb, #3c5120 5%, white);
    --color-secondary-100: color-mix(in srgb, #3c5120 10%, white);
    --color-secondary-200: color-mix(in srgb, #3c5120 30%, white);
    --color-secondary-300: color-mix(in srgb, #3c5120 50%, white);
    --color-secondary-400: color-mix(in srgb, #3c5120 70%, white);
    --color-secondary-500: #3c5120;
    --color-secondary-600: color-mix(in srgb, #3c5120 70%, black);
    --color-secondary-700: color-mix(in srgb, #3c5120 50%, black);
    --color-secondary-800: color-mix(in srgb, #3c5120 30%, black);
    --color-secondary-900: color-mix(in srgb, #3c5120 10%, black);

    --color-button-primary: #3c5120;

    /* button-primary color variants */
    --color-button-primary-50: color-mix(in srgb, #3c5120 5%, white);
    --color-button-primary-100: color-mix(in srgb, #3c5120 10%, white);
    --color-button-primary-200: color-mix(in srgb, #3c5120 30%, white);
    --color-button-primary-300: color-mix(in srgb, #3c5120 50%, white);
    --color-button-primary-400: color-mix(in srgb, #3c5120 70%, white);
    --color-button-primary-500: #3c5120;
    --color-button-primary-600: color-mix(in srgb, #3c5120 70%, black);
    --color-button-primary-700: color-mix(in srgb, #3c5120 50%, black);
    --color-button-primary-800: color-mix(in srgb, #3c5120 30%, black);
    --color-button-primary-900: color-mix(in srgb, #3c5120 10%, black);

    --color-button-secondary: #d3a056;

    /* button-secondary color variants */
    --color-button-secondary-50: color-mix(in srgb, #d3a056 5%, white);
    --color-button-secondary-100: color-mix(in srgb, #d3a056 10%, white);
    --color-button-secondary-200: color-mix(in srgb, #d3a056 30%, white);
    --color-button-secondary-300: color-mix(in srgb, #d3a056 50%, white);
    --color-button-secondary-400: color-mix(in srgb, #d3a056 70%, white);
    --color-button-secondary-500: #d3a056;
    --color-button-secondary-600: color-mix(in srgb, #d3a056 70%, black);
    --color-button-secondary-700: color-mix(in srgb, #d3a056 50%, black);
    --color-button-secondary-800: color-mix(in srgb, #d3a056 30%, black);
    --color-button-secondary-900: color-mix(in srgb, #d3a056 10%, black);

}

@layer utilities {
  .bg-primary {
    background-color: var(--color-primary);
  }

  .hover\:bg-primary:hover {
    background-color: var(--color-primary);
  }

  .bg-primary-50 {
    background-color: var(--color-primary-50);
  }

  .hover\:bg-primary-50:hover {
    background-color: var(--color-primary-50);
  }

  .bg-primary-100 {
    background-color: var(--color-primary-100);
  }

  .hover\:bg-primary-100:hover {
    background-color: var(--color-primary-100);
  }

  .bg-primary-200 {
    background-color: var(--color-primary-200);
  }

  .hover\:bg-primary-200:hover {
    background-color: var(--color-primary-200);
  }

  .bg-primary-300 {
    background-color: var(--color-primary-300);
  }

  .hover\:bg-primary-300:hover {
    background-color: var(--color-primary-300);
  }

  .bg-primary-400 {
    background-color: var(--color-primary-400);
  }

  .hover\:bg-primary-400:hover {
    background-color: var(--color-primary-400);
  }

  .bg-primary-500 {
    background-color: var(--color-primary-500);
  }

  .hover\:bg-primary-500:hover {
    background-color: var(--color-primary-500);
  }

  .bg-primary-600 {
    background-color: var(--color-primary-600);
  }

  .hover\:bg-primary-600:hover {
    background-color: var(--color-primary-600);
  }

  .bg-primary-700 {
    background-color: var(--color-primary-700);
  }

  .hover\:bg-primary-700:hover {
    background-color: var(--color-primary-700);
  }

  .bg-primary-800 {
    background-color: var(--color-primary-800);
  }

  .hover\:bg-primary-800:hover {
    background-color: var(--color-primary-800);
  }

  .bg-primary-900 {
    background-color: var(--color-primary-900);
  }

  .hover\:bg-primary-900:hover {
    background-color: var(--color-primary-900);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .hover\:text-primary:hover {
    color: var(--color-primary);
  }

  .text-primary-50 {
    color: var(--color-primary-50);
  }

  .hover\:text-primary-50:hover {
    color: var(--color-primary-50);
  }

  .text-primary-100 {
    color: var(--color-primary-100);
  }

  .hover\:text-primary-100:hover {
    color: var(--color-primary-100);
  }

  .text-primary-200 {
    color: var(--color-primary-200);
  }

  .hover\:text-primary-200:hover {
    color: var(--color-primary-200);
  }

  .text-primary-300 {
    color: var(--color-primary-300);
  }

  .hover\:text-primary-300:hover {
    color: var(--color-primary-300);
  }

  .text-primary-400 {
    color: var(--color-primary-400);
  }

  .hover\:text-primary-400:hover {
    color: var(--color-primary-400);
  }

  .text-primary-500 {
    color: var(--color-primary-500);
  }

  .hover\:text-primary-500:hover {
    color: var(--color-primary-500);
  }

  .text-primary-600 {
    color: var(--color-primary-600);
  }

  .hover\:text-primary-600:hover {
    color: var(--color-primary-600);
  }

  .text-primary-700 {
    color: var(--color-primary-700);
  }

  .hover\:text-primary-700:hover {
    color: var(--color-primary-700);
  }

  .text-primary-800 {
    color: var(--color-primary-800);
  }

  .hover\:text-primary-800:hover {
    color: var(--color-primary-800);
  }

  .text-primary-900 {
    color: var(--color-primary-900);
  }

  .hover\:text-primary-900:hover {
    color: var(--color-primary-900);
  }

  .border-primary {
    border-color: var(--color-primary);
  }

  .hover\:border-primary:hover {
    border-color: var(--color-primary);
  }

  .border-primary-50 {
    border-color: var(--color-primary-50);
  }

  .hover\:border-primary-50:hover {
    border-color: var(--color-primary-50);
  }

  .border-primary-100 {
    border-color: var(--color-primary-100);
  }

  .hover\:border-primary-100:hover {
    border-color: var(--color-primary-100);
  }

  .border-primary-200 {
    border-color: var(--color-primary-200);
  }

  .hover\:border-primary-200:hover {
    border-color: var(--color-primary-200);
  }

  .border-primary-300 {
    border-color: var(--color-primary-300);
  }

  .hover\:border-primary-300:hover {
    border-color: var(--color-primary-300);
  }

  .border-primary-400 {
    border-color: var(--color-primary-400);
  }

  .hover\:border-primary-400:hover {
    border-color: var(--color-primary-400);
  }

  .border-primary-500 {
    border-color: var(--color-primary-500);
  }

  .hover\:border-primary-500:hover {
    border-color: var(--color-primary-500);
  }

  .border-primary-600 {
    border-color: var(--color-primary-600);
  }

  .hover\:border-primary-600:hover {
    border-color: var(--color-primary-600);
  }

  .border-primary-700 {
    border-color: var(--color-primary-700);
  }

  .hover\:border-primary-700:hover {
    border-color: var(--color-primary-700);
  }

  .border-primary-800 {
    border-color: var(--color-primary-800);
  }

  .hover\:border-primary-800:hover {
    border-color: var(--color-primary-800);
  }

  .border-primary-900 {
    border-color: var(--color-primary-900);
  }

  .hover\:border-primary-900:hover {
    border-color: var(--color-primary-900);
  }

  .bg-secondary {
    background-color: var(--color-secondary);
  }

  .hover\:bg-secondary:hover {
    background-color: var(--color-secondary);
  }

  .bg-secondary-50 {
    background-color: var(--color-secondary-50);
  }

  .hover\:bg-secondary-50:hover {
    background-color: var(--color-secondary-50);
  }

  .bg-secondary-100 {
    background-color: var(--color-secondary-100);
  }

  .hover\:bg-secondary-100:hover {
    background-color: var(--color-secondary-100);
  }

  .bg-secondary-200 {
    background-color: var(--color-secondary-200);
  }

  .hover\:bg-secondary-200:hover {
    background-color: var(--color-secondary-200);
  }

  .bg-secondary-300 {
    background-color: var(--color-secondary-300);
  }

  .hover\:bg-secondary-300:hover {
    background-color: var(--color-secondary-300);
  }

  .bg-secondary-400 {
    background-color: var(--color-secondary-400);
  }

  .hover\:bg-secondary-400:hover {
    background-color: var(--color-secondary-400);
  }

  .bg-secondary-500 {
    background-color: var(--color-secondary-500);
  }

  .hover\:bg-secondary-500:hover {
    background-color: var(--color-secondary-500);
  }

  .bg-secondary-600 {
    background-color: var(--color-secondary-600);
  }

  .hover\:bg-secondary-600:hover {
    background-color: var(--color-secondary-600);
  }

  .bg-secondary-700 {
    background-color: var(--color-secondary-700);
  }

  .hover\:bg-secondary-700:hover {
    background-color: var(--color-secondary-700);
  }

  .bg-secondary-800 {
    background-color: var(--color-secondary-800);
  }

  .hover\:bg-secondary-800:hover {
    background-color: var(--color-secondary-800);
  }

  .bg-secondary-900 {
    background-color: var(--color-secondary-900);
  }

  .hover\:bg-secondary-900:hover {
    background-color: var(--color-secondary-900);
  }

  .text-secondary {
    color: var(--color-secondary);
  }

  .hover\:text-secondary:hover {
    color: var(--color-secondary);
  }

  .text-secondary-50 {
    color: var(--color-secondary-50);
  }

  .hover\:text-secondary-50:hover {
    color: var(--color-secondary-50);
  }

  .text-secondary-100 {
    color: var(--color-secondary-100);
  }

  .hover\:text-secondary-100:hover {
    color: var(--color-secondary-100);
  }

  .text-secondary-200 {
    color: var(--color-secondary-200);
  }

  .hover\:text-secondary-200:hover {
    color: var(--color-secondary-200);
  }

  .text-secondary-300 {
    color: var(--color-secondary-300);
  }

  .hover\:text-secondary-300:hover {
    color: var(--color-secondary-300);
  }

  .text-secondary-400 {
    color: var(--color-secondary-400);
  }

  .hover\:text-secondary-400:hover {
    color: var(--color-secondary-400);
  }

  .text-secondary-500 {
    color: var(--color-secondary-500);
  }

  .hover\:text-secondary-500:hover {
    color: var(--color-secondary-500);
  }

  .text-secondary-600 {
    color: var(--color-secondary-600);
  }

  .hover\:text-secondary-600:hover {
    color: var(--color-secondary-600);
  }

  .text-secondary-700 {
    color: var(--color-secondary-700);
  }

  .hover\:text-secondary-700:hover {
    color: var(--color-secondary-700);
  }

  .text-secondary-800 {
    color: var(--color-secondary-800);
  }

  .hover\:text-secondary-800:hover {
    color: var(--color-secondary-800);
  }

  .text-secondary-900 {
    color: var(--color-secondary-900);
  }

  .hover\:text-secondary-900:hover {
    color: var(--color-secondary-900);
  }

  .border-secondary {
    border-color: var(--color-secondary);
  }

  .hover\:border-secondary:hover {
    border-color: var(--color-secondary);
  }

  .border-secondary-50 {
    border-color: var(--color-secondary-50);
  }

  .hover\:border-secondary-50:hover {
    border-color: var(--color-secondary-50);
  }

  .border-secondary-100 {
    border-color: var(--color-secondary-100);
  }

  .hover\:border-secondary-100:hover {
    border-color: var(--color-secondary-100);
  }

  .border-secondary-200 {
    border-color: var(--color-secondary-200);
  }

  .hover\:border-secondary-200:hover {
    border-color: var(--color-secondary-200);
  }

  .border-secondary-300 {
    border-color: var(--color-secondary-300);
  }

  .hover\:border-secondary-300:hover {
    border-color: var(--color-secondary-300);
  }

  .border-secondary-400 {
    border-color: var(--color-secondary-400);
  }

  .hover\:border-secondary-400:hover {
    border-color: var(--color-secondary-400);
  }

  .border-secondary-500 {
    border-color: var(--color-secondary-500);
  }

  .hover\:border-secondary-500:hover {
    border-color: var(--color-secondary-500);
  }

  .border-secondary-600 {
    border-color: var(--color-secondary-600);
  }

  .hover\:border-secondary-600:hover {
    border-color: var(--color-secondary-600);
  }

  .border-secondary-700 {
    border-color: var(--color-secondary-700);
  }

  .hover\:border-secondary-700:hover {
    border-color: var(--color-secondary-700);
  }

  .border-secondary-800 {
    border-color: var(--color-secondary-800);
  }

  .hover\:border-secondary-800:hover {
    border-color: var(--color-secondary-800);
  }

  .border-secondary-900 {
    border-color: var(--color-secondary-900);
  }

  .hover\:border-secondary-900:hover {
    border-color: var(--color-secondary-900);
  }

  .bg-button-primary {
    background-color: var(--color-button-primary);
  }

  .hover\:bg-button-primary:hover {
    background-color: var(--color-button-primary);
  }

  .bg-button-primary-50 {
    background-color: var(--color-button-primary-50);
  }

  .hover\:bg-button-primary-50:hover {
    background-color: var(--color-button-primary-50);
  }

  .bg-button-primary-100 {
    background-color: var(--color-button-primary-100);
  }

  .hover\:bg-button-primary-100:hover {
    background-color: var(--color-button-primary-100);
  }

  .bg-button-primary-200 {
    background-color: var(--color-button-primary-200);
  }

  .hover\:bg-button-primary-200:hover {
    background-color: var(--color-button-primary-200);
  }

  .bg-button-primary-300 {
    background-color: var(--color-button-primary-300);
  }

  .hover\:bg-button-primary-300:hover {
    background-color: var(--color-button-primary-300);
  }

  .bg-button-primary-400 {
    background-color: var(--color-button-primary-400);
  }

  .hover\:bg-button-primary-400:hover {
    background-color: var(--color-button-primary-400);
  }

  .bg-button-primary-500 {
    background-color: var(--color-button-primary-500);
  }

  .hover\:bg-button-primary-500:hover {
    background-color: var(--color-button-primary-500);
  }

  .bg-button-primary-600 {
    background-color: var(--color-button-primary-600);
  }

  .hover\:bg-button-primary-600:hover {
    background-color: var(--color-button-primary-600);
  }

  .bg-button-primary-700 {
    background-color: var(--color-button-primary-700);
  }

  .hover\:bg-button-primary-700:hover {
    background-color: var(--color-button-primary-700);
  }

  .bg-button-primary-800 {
    background-color: var(--color-button-primary-800);
  }

  .hover\:bg-button-primary-800:hover {
    background-color: var(--color-button-primary-800);
  }

  .bg-button-primary-900 {
    background-color: var(--color-button-primary-900);
  }

  .hover\:bg-button-primary-900:hover {
    background-color: var(--color-button-primary-900);
  }

  .text-button-primary {
    color: var(--color-button-primary);
  }

  .hover\:text-button-primary:hover {
    color: var(--color-button-primary);
  }

  .text-button-primary-50 {
    color: var(--color-button-primary-50);
  }

  .hover\:text-button-primary-50:hover {
    color: var(--color-button-primary-50);
  }

  .text-button-primary-100 {
    color: var(--color-button-primary-100);
  }

  .hover\:text-button-primary-100:hover {
    color: var(--color-button-primary-100);
  }

  .text-button-primary-200 {
    color: var(--color-button-primary-200);
  }

  .hover\:text-button-primary-200:hover {
    color: var(--color-button-primary-200);
  }

  .text-button-primary-300 {
    color: var(--color-button-primary-300);
  }

  .hover\:text-button-primary-300:hover {
    color: var(--color-button-primary-300);
  }

  .text-button-primary-400 {
    color: var(--color-button-primary-400);
  }

  .hover\:text-button-primary-400:hover {
    color: var(--color-button-primary-400);
  }

  .text-button-primary-500 {
    color: var(--color-button-primary-500);
  }

  .hover\:text-button-primary-500:hover {
    color: var(--color-button-primary-500);
  }

  .text-button-primary-600 {
    color: var(--color-button-primary-600);
  }

  .hover\:text-button-primary-600:hover {
    color: var(--color-button-primary-600);
  }

  .text-button-primary-700 {
    color: var(--color-button-primary-700);
  }

  .hover\:text-button-primary-700:hover {
    color: var(--color-button-primary-700);
  }

  .text-button-primary-800 {
    color: var(--color-button-primary-800);
  }

  .hover\:text-button-primary-800:hover {
    color: var(--color-button-primary-800);
  }

  .text-button-primary-900 {
    color: var(--color-button-primary-900);
  }

  .hover\:text-button-primary-900:hover {
    color: var(--color-button-primary-900);
  }

  .border-button-primary {
    border-color: var(--color-button-primary);
  }

  .hover\:border-button-primary:hover {
    border-color: var(--color-button-primary);
  }

  .border-button-primary-50 {
    border-color: var(--color-button-primary-50);
  }

  .hover\:border-button-primary-50:hover {
    border-color: var(--color-button-primary-50);
  }

  .border-button-primary-100 {
    border-color: var(--color-button-primary-100);
  }

  .hover\:border-button-primary-100:hover {
    border-color: var(--color-button-primary-100);
  }

  .border-button-primary-200 {
    border-color: var(--color-button-primary-200);
  }

  .hover\:border-button-primary-200:hover {
    border-color: var(--color-button-primary-200);
  }

  .border-button-primary-300 {
    border-color: var(--color-button-primary-300);
  }

  .hover\:border-button-primary-300:hover {
    border-color: var(--color-button-primary-300);
  }

  .border-button-primary-400 {
    border-color: var(--color-button-primary-400);
  }

  .hover\:border-button-primary-400:hover {
    border-color: var(--color-button-primary-400);
  }

  .border-button-primary-500 {
    border-color: var(--color-button-primary-500);
  }

  .hover\:border-button-primary-500:hover {
    border-color: var(--color-button-primary-500);
  }

  .border-button-primary-600 {
    border-color: var(--color-button-primary-600);
  }

  .hover\:border-button-primary-600:hover {
    border-color: var(--color-button-primary-600);
  }

  .border-button-primary-700 {
    border-color: var(--color-button-primary-700);
  }

  .hover\:border-button-primary-700:hover {
    border-color: var(--color-button-primary-700);
  }

  .border-button-primary-800 {
    border-color: var(--color-button-primary-800);
  }

  .hover\:border-button-primary-800:hover {
    border-color: var(--color-button-primary-800);
  }

  .border-button-primary-900 {
    border-color: var(--color-button-primary-900);
  }

  .hover\:border-button-primary-900:hover {
    border-color: var(--color-button-primary-900);
  }

  .bg-button-secondary {
    background-color: var(--color-button-secondary);
  }

  .hover\:bg-button-secondary:hover {
    background-color: var(--color-button-secondary);
  }

  .bg-button-secondary-50 {
    background-color: var(--color-button-secondary-50);
  }

  .hover\:bg-button-secondary-50:hover {
    background-color: var(--color-button-secondary-50);
  }

  .bg-button-secondary-100 {
    background-color: var(--color-button-secondary-100);
  }

  .hover\:bg-button-secondary-100:hover {
    background-color: var(--color-button-secondary-100);
  }

  .bg-button-secondary-200 {
    background-color: var(--color-button-secondary-200);
  }

  .hover\:bg-button-secondary-200:hover {
    background-color: var(--color-button-secondary-200);
  }

  .bg-button-secondary-300 {
    background-color: var(--color-button-secondary-300);
  }

  .hover\:bg-button-secondary-300:hover {
    background-color: var(--color-button-secondary-300);
  }

  .bg-button-secondary-400 {
    background-color: var(--color-button-secondary-400);
  }

  .hover\:bg-button-secondary-400:hover {
    background-color: var(--color-button-secondary-400);
  }

  .bg-button-secondary-500 {
    background-color: var(--color-button-secondary-500);
  }

  .hover\:bg-button-secondary-500:hover {
    background-color: var(--color-button-secondary-500);
  }

  .bg-button-secondary-600 {
    background-color: var(--color-button-secondary-600);
  }

  .hover\:bg-button-secondary-600:hover {
    background-color: var(--color-button-secondary-600);
  }

  .bg-button-secondary-700 {
    background-color: var(--color-button-secondary-700);
  }

  .hover\:bg-button-secondary-700:hover {
    background-color: var(--color-button-secondary-700);
  }

  .bg-button-secondary-800 {
    background-color: var(--color-button-secondary-800);
  }

  .hover\:bg-button-secondary-800:hover {
    background-color: var(--color-button-secondary-800);
  }

  .bg-button-secondary-900 {
    background-color: var(--color-button-secondary-900);
  }

  .hover\:bg-button-secondary-900:hover {
    background-color: var(--color-button-secondary-900);
  }

  .text-button-secondary {
    color: var(--color-button-secondary);
  }

  .hover\:text-button-secondary:hover {
    color: var(--color-button-secondary);
  }

  .text-button-secondary-50 {
    color: var(--color-button-secondary-50);
  }

  .hover\:text-button-secondary-50:hover {
    color: var(--color-button-secondary-50);
  }

  .text-button-secondary-100 {
    color: var(--color-button-secondary-100);
  }

  .hover\:text-button-secondary-100:hover {
    color: var(--color-button-secondary-100);
  }

  .text-button-secondary-200 {
    color: var(--color-button-secondary-200);
  }

  .hover\:text-button-secondary-200:hover {
    color: var(--color-button-secondary-200);
  }

  .text-button-secondary-300 {
    color: var(--color-button-secondary-300);
  }

  .hover\:text-button-secondary-300:hover {
    color: var(--color-button-secondary-300);
  }

  .text-button-secondary-400 {
    color: var(--color-button-secondary-400);
  }

  .hover\:text-button-secondary-400:hover {
    color: var(--color-button-secondary-400);
  }

  .text-button-secondary-500 {
    color: var(--color-button-secondary-500);
  }

  .hover\:text-button-secondary-500:hover {
    color: var(--color-button-secondary-500);
  }

  .text-button-secondary-600 {
    color: var(--color-button-secondary-600);
  }

  .hover\:text-button-secondary-600:hover {
    color: var(--color-button-secondary-600);
  }

  .text-button-secondary-700 {
    color: var(--color-button-secondary-700);
  }

  .hover\:text-button-secondary-700:hover {
    color: var(--color-button-secondary-700);
  }

  .text-button-secondary-800 {
    color: var(--color-button-secondary-800);
  }

  .hover\:text-button-secondary-800:hover {
    color: var(--color-button-secondary-800);
  }

  .text-button-secondary-900 {
    color: var(--color-button-secondary-900);
  }

  .hover\:text-button-secondary-900:hover {
    color: var(--color-button-secondary-900);
  }

  .border-button-secondary {
    border-color: var(--color-button-secondary);
  }

  .hover\:border-button-secondary:hover {
    border-color: var(--color-button-secondary);
  }

  .border-button-secondary-50 {
    border-color: var(--color-button-secondary-50);
  }

  .hover\:border-button-secondary-50:hover {
    border-color: var(--color-button-secondary-50);
  }

  .border-button-secondary-100 {
    border-color: var(--color-button-secondary-100);
  }

  .hover\:border-button-secondary-100:hover {
    border-color: var(--color-button-secondary-100);
  }

  .border-button-secondary-200 {
    border-color: var(--color-button-secondary-200);
  }

  .hover\:border-button-secondary-200:hover {
    border-color: var(--color-button-secondary-200);
  }

  .border-button-secondary-300 {
    border-color: var(--color-button-secondary-300);
  }

  .hover\:border-button-secondary-300:hover {
    border-color: var(--color-button-secondary-300);
  }

  .border-button-secondary-400 {
    border-color: var(--color-button-secondary-400);
  }

  .hover\:border-button-secondary-400:hover {
    border-color: var(--color-button-secondary-400);
  }

  .border-button-secondary-500 {
    border-color: var(--color-button-secondary-500);
  }

  .hover\:border-button-secondary-500:hover {
    border-color: var(--color-button-secondary-500);
  }

  .border-button-secondary-600 {
    border-color: var(--color-button-secondary-600);
  }

  .hover\:border-button-secondary-600:hover {
    border-color: var(--color-button-secondary-600);
  }

  .border-button-secondary-700 {
    border-color: var(--color-button-secondary-700);
  }

  .hover\:border-button-secondary-700:hover {
    border-color: var(--color-button-secondary-700);
  }

  .border-button-secondary-800 {
    border-color: var(--color-button-secondary-800);
  }

  .hover\:border-button-secondary-800:hover {
    border-color: var(--color-button-secondary-800);
  }

  .border-button-secondary-900 {
    border-color: var(--color-button-secondary-900);
  }

  .hover\:border-button-secondary-900:hover {
    border-color: var(--color-button-secondary-900);
  }

}