@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-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-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;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
  .display-none {
    @apply hidden;
  }
}