@import "tailwindcss";

@theme {
  /* Custom Colors */
  --color-red-main: #c60204;
  --color-red-active: #c70204;
  --color-body: #222222;
  --color-description: #444444;
  --color-caption: #666666;
  --color-border: #e2e2e2;
  --color-border-e2: #e2e2e2;
  --color-stroke: #f2f2f2;
  --color-bg-fa: #fafafa;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer utilities {
  .prose {
    @apply max-w-none text-foreground;
  }

  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4 {
    @apply text-foreground font-bold mt-8 mb-4;
  }

  .prose p {
    @apply mb-4 leading-7;
  }

  .prose a {
    @apply text-primary underline hover:text-primary/80;
  }

  .prose img {
    @apply rounded-lg my-6;
  }

  .prose ul,
  .prose ol {
    @apply my-4 ml-6;
  }

  .prose li {
    @apply mb-2;
  }
}