/* latin
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(./fonts/inter-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} */

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
 
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
 
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
 
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
 
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
 
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
 
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
 
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
 
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
 
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
 
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
 
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
 
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

@layer utilities {
  .step {
    counter-increment: step;
  }
  .step:before {
    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
    @apply ml-[-50px] mt-[-4px];
    content: counter(step);
  }
}

@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}

@layer components {
  .cn-typography h1 {
    @apply mt-2 text-4xl font-bold scroll-m-20;
  }
  
  .cn-typography h2 {
    @apply mt-12 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0 scroll-m-20;
  }
  
  .cn-typography h3 {
    @apply mt-8 text-xl font-semibold tracking-tight scroll-m-20;
  }
  
  .cn-typography h4 {
    @apply mt-8 text-lg font-semibold tracking-tight scroll-m-20;
  }
  
  .cn-typography h5 {
    @apply mt-8 text-lg font-semibold tracking-tight scroll-m-20;
  }
  
  .cn-typography h6 {
    @apply mt-8 text-base font-semibold tracking-tight scroll-m-20;
  }
  
  .cn-typography a {
    @apply font-medium underline underline-offset-4;
  }
  
  .cn-typography p {
    @apply leading-7;
  }
  
  .cn-typography p:not(:first-child) {
    @apply mt-6;
  }
  
  .cn-typography ul {
    @apply my-6 ml-6 list-disc;
  }
  
  .cn-typography ol {
    @apply my-6 ml-6 list-decimal;
  }
  
  .cn-typography li {
    @apply mt-2;
  }
  
  .cn-typography blockquote {
    @apply mt-6 border-l-2 pl-6 italic;
  }
  
  .cn-typography img {
    @apply rounded-md;
  }
  
  .cn-typography hr {
    @apply my-4 md:my-8;
  }
  
  .cn-typography table {
    @apply my-6 w-full overflow-y-auto;
  }
  
  .cn-typography tr {
    @apply m-0 border-t p-0 even:bg-muted;
  }
  
  .cn-typography th {
    @apply border px-4 py-2 text-left font-bold;
  }
  
  .cn-typography th[align="center"] {
    @apply text-center;
  }
  
  .cn-typography th[align="right"] {
    @apply text-right;
  }
  
  .cn-typography td {
    @apply border px-4 py-2 text-left;
  }
  
  .cn-typography td[align="center"] {
    @apply text-center;
  }
  
  .cn-typography td[align="right"] {
    @apply text-right;
  }
  
  .cn-typography pre {
    @apply mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900 text-white p-6;
  }
}

body {
  font-family: 'Inter Variable', sans-serif;
}