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

html {
  scroll-behavior: smooth;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
  }
}

.blog-post h1 {
  font-size: 2.5em;
}

.blog-post h2 {
  font-size: 2em;
}

.blog-post h3 {
  font-size: 1.75em;
}

.blog-post h4 {
  font-size: 1.5em;
}

.blog-post h5 {
  font-size: 1.25em;
}

.blog-post h6 {
  font-size: 1em;
}

.blog-post p {
  margin: 0 0 1.5em;
}

.blog-post a {
  color: #3498db;
  text-decoration: none;
}

.blog-post a:hover {
  text-decoration: underline;
}

.blog-post strong {
  font-weight: bold;
}

.blog-post em {
  font-style: italic;
}

.blog-post blockquote {
  font-style: italic;
  color: #666;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  border-left: 5px solid #ccc;
}

.blog-post ul, ol {
  margin: 0 0 1.5em 1.5em;
}

.blog-post li {
  margin-bottom: 0.5em;
}

.blog-post code {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f4f4f4;
  padding: 2px 4px;
  border-radius: 4px;
  color: #c7254e;
}

.blog-post pre {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
}

.blog-post img {
  max-width: 100%;
  height: auto;
}

.blog-post figure {
  margin: 0 0 1.5em;
}

.blog-post figcaption {
  font-size: 0.9em;
  color: #666;
  text-align: center;
}

.blog-post hr {
  border: 0;
  height: 1px;
  background: #ccc;
  margin: 2em 0;
}

@media (max-width: 768px) {
  .blog-post h1 {
    font-size: 2em;
  }

  .blog-post h2 {
    font-size: 1.75em;
  }

  .blog-post h3 {
    font-size: 1.5em;
  }

  .blog-post h4 {
    font-size: 1.25em;
  }

  .blog-post h5 {
    font-size: 1em;
  }

  .blog-post h6 {
    font-size: 0.875em;
  }
}

body.dark {
  background: #000;
  color: #aeaeae;
}