@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;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 213 13% 6%;
    --sidebar-primary: 213 13% 16%;
    --sidebar-primary-foreground: 213 13% 76%;
    --sidebar-accent: 0 0% 85%;
    --sidebar-accent-foreground: 0 0% 25%;
    --sidebar-border: 0 0% 95%;
    --sidebar-ring: 213 13% 16%;
  }

  .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%;
    --sidebar-background: 216 28% 5%;
    --sidebar-foreground: 210 17% 92%;
    --sidebar-primary: 210 17% 82%;
    --sidebar-primary-foreground: 210 17% 22%;
    --sidebar-accent: 216 28% 22%;
    --sidebar-accent-foreground: 216 28% 82%;
    --sidebar-border: 216 18% 12%;
    --sidebar-ring: 210 17% 82%;
  }
}

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

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

.markdown-body {
  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;
}

.markdown-body figure {
  margin: 0;
}

code[data-theme*=" "],
code[data-theme*=" "] span {
  color: var(--shiki-light);
  background-color: var(--shiki-light-bg);
}

.dark code[data-theme*=" "],
.dark code[data-theme*=" "] span {
  color: var(--shiki-dark);
  background-color: var(--shiki-dark-bg);
}
