@import "@fontsource/fira-code/500.css";
@import "github-markdown-css/github-markdown.css";

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 213 13% 16%;
    --muted: 0 12% 90%;
    --muted-foreground: 0 12% 30%;
    --popover: 0 0% 97%;
    --popover-foreground: 213 13% 6%;
    --card: 0 0% 98%;
    --card-foreground: 213 13% 11%;
    --border: 0 0% 95%;
    --input: 0 0% 92%;
    --primary: 213 13% 16%;
    --primary-foreground: 213 13% 76%;
    --secondary: 213 3% 75%;
    --secondary-foreground: 213 3% 15%;
    --accent: 0 0% 85%;
    --accent-foreground: 0 0% 25%;
    --destructive: 8 86% 40%;
    --destructive-foreground: 0 0% 100%;
    --ring: 213 13% 16%;
    --chart-1: 213 13% 16%;
    --chart-2: 213 3% 75%;
    --chart-3: 0 0% 85%;
    --chart-4: 213 3% 78%;
    --chart-5: 213 16% 16%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 216 28% 7%;
    --foreground: 210 17% 82%;
    --muted: 216 12% 15%;
    --muted-foreground: 216 12% 65%;
    --popover: 216 28% 4%;
    --popover-foreground: 210 17% 92%;
    --card: 216 28% 5%;
    --card-foreground: 210 17% 87%;
    --border: 216 18% 12%;
    --input: 216 18% 15%;
    --primary: 210 17% 82%;
    --primary-foreground: 210 17% 22%;
    --secondary: 210 7% 25%;
    --secondary-foreground: 210 7% 85%;
    --accent: 216 28% 22%;
    --accent-foreground: 216 28% 82%;
    --destructive: 1 86% 57%;
    --destructive-foreground: 0 0% 100%;
    --ring: 210 17% 82%;
    --chart-1: 210 17% 82%;
    --chart-2: 210 7% 25%;
    --chart-3: 216 28% 22%;
    --chart-4: 210 7% 28%;
    --chart-5: 210 20% 82%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    font-family: "Fira Code";
  }
}

.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
  font-family: "Fira Code";
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.markdown-body pre,
.markdown-body code {
  font-family: "Fira Code";
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 768px) {
  .markdown-body {
    padding: 15px;
  }
}