@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    box-sizing: border-box;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

@layer utilities {
  .light-mode-background-color {
    @apply bg-neutral-100;
  }

  .light-mode-border-color {
    @apply border-neutral-300;
  }

  .light-mode-text-color {
    @apply text-neutral-700;
  }

  .light-mode-link-color {
    @apply text-neutral-500 underline;
    @apply hover:text-neutral-700;
    @apply active:text-neutral-700;
  }

  .light-mode-bg-action-color {
    @apply bg-neutral-400;
  }

  .dark-mode-background-color {
    @apply bg-neutral-900;
  }

  .dark-mode-border-color {
    @apply border-neutral-700;
  }

  .dark-mode-text-color {
    @apply text-neutral-300;
  }

  .dark-mode-link-color {
    @apply text-neutral-400 underline;
    @apply hover:text-neutral-200;
    @apply active:text-neutral-200;
  }

  .dark-mode-bg-action-color {
    @apply bg-neutral-600;
  }
}