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

@layer base {
  :root {
    --color-text-base: 40, 39, 40;
    --color-text-accent: 0, 108, 172;
    --color-fill: 251, 254, 251;
    --color-accent: 0, 108, 172;
    --color-card: 230, 230, 230;
    --color-card-muted: 205, 205, 205;
    --color-border: 236, 233, 233;
  }
  .theme-dark {
    --color-text-base: 230, 230, 230;
    --color-text-accent: 26, 217, 217;
    --color-fill: 47, 55, 65;
    --color-accent: 26, 217, 217;
    --color-card: 63, 75, 90;
    --color-card-muted: 89, 107, 129;
    --color-border: 59, 70, 85;
  }
  #sun-svg,
  .theme-dark #moon-svg {
    display: none;
  }
  #moon-svg,
  .theme-dark #sun-svg {
    display: block;
  }
  section,
  footer {
    @apply max-w-3xl mx-auto px-4;
  }
  svg {
    @apply w-6 h-6 inline-block fill-skin-base group-hover:fill-skin-accent;
  }
  .prose {
    @apply prose-a:underline-offset-8 prose-a:!decoration-dashed hover:prose-a:!decoration-solid;
  }
  .theme-dark .prose {
    @apply prose-invert;
  }
}

@layer components {
  .display-none {
    @apply hidden;
  }
}