@layer base {
  .box {
    @apply border-0 border-ground/20 dark:border-negative/20 rounded-lg p-2 sm:p-4;
  }

  .box-sm {
    @apply p-1.5 sm:p-2;
  }
  .box-md {
    @apply p-4 sm:p-6;
  }
  .box-lg {
    @apply p-6 sm:p-8;
  }
  .box-xl {
    @apply p-8 sm:p-10;
  }

  .box-pop {
    @apply shadow-lg hover:shadow-xl transition-shadow duration-200;
  }

  .box-white {
    @apply bg-white dark:bg-black text-negative-text dark:text-negative-dark-text;
  }
  .box-primary {
    @apply bg-primary dark:bg-primary-dark text-primary-text dark:text-primary-dark-text;
  }
  .box-secondary {
    @apply bg-secondary dark:bg-secondary-dark text-secondary-text dark:text-secondary-dark-text;
  }
  .box-negative {
    @apply bg-negative dark:bg-negative-dark text-negative-text dark:text-negative-dark-text;
  }
  .box-primary-highlight {
    @apply bg-primary-highlight dark:bg-primary-highlight-dark text-primary-highlight-text dark:text-primary-highlight-dark-text;
  }
  .box-ground {
    @apply bg-ground dark:bg-ground-dark text-ground-text dark:text-ground-dark-text;
  }
  .box-ground-primary {
    @apply bg-ground-primary dark:bg-ground-primary-dark text-ground-primary-text dark:text-ground-primary-dark-text;
  }
  .box-ground-secondary {
    @apply bg-ground-secondary dark:bg-ground-secondary-dark text-ground-secondary-text dark:text-ground-secondary-dark-text;
  }
  .box-success {
    @apply bg-success dark:bg-success-dark text-success-text dark:text-success-dark-text;
  }
  .box-warning {
    @apply bg-warning dark:bg-warning-dark text-warning-text dark:text-warning-dark-text;
  }
  .box-info {
    @apply bg-info dark:bg-info-dark text-info-text dark:text-info-dark-text;
  }
}