/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --font-body:
      "Inter Tight",
      system-ui,
      sans-serif;
    --font-heading:
      "Inter Tight",
      system-ui,
      sans-serif;
    --font-label:
      "Inter Tight",
      system-ui,
      sans-serif;
    --background-50: 0.99 0.000 0;
    --background-100: 0.97 0.002 0;
    --background-200: 0.93 0.003 0;
    --background-300: 0.88 0.004 0;
    --background-400: 0.82 0.004 0;
    --background-500: 0.74 0.004 0;
    --background-600: 0.64 0.004 0;
    --background-700: 0.54 0.003 0;
    --background-800: 0.44 0.003 0;
    --background-900: 0.34 0.002 0;
    --background-950: 0.24 0.002 0;
    --primary-50: 0.97 0.012 178;
    --primary-100: 0.94 0.025 178;
    --primary-200: 0.90 0.040 178;
    --primary-300: 0.86 0.053 178;
    --primary-400: 0.83 0.061 178;
    --primary-500: 0.80 0.065 178;
    --primary-600: 0.72 0.062 178;
    --primary-700: 0.63 0.057 178;
    --primary-800: 0.52 0.048 178;
    --primary-900: 0.41 0.038 178;
    --primary-950: 0.30 0.028 178;
    --accent-50: 0.97 0.012 222;
    --accent-100: 0.94 0.024 222;
    --accent-200: 0.90 0.038 222;
    --accent-300: 0.86 0.050 222;
    --accent-400: 0.82 0.059 222;
    --accent-500: 0.77 0.067 222;
    --accent-600: 0.69 0.063 222;
    --accent-700: 0.60 0.057 222;
    --accent-800: 0.50 0.048 222;
    --accent-900: 0.40 0.038 222;
    --accent-950: 0.29 0.028 222;
    --secondary-50: 0.97 0.010 350;
    --secondary-100: 0.94 0.022 350;
    --secondary-200: 0.90 0.035 350;
    --secondary-300: 0.86 0.045 350;
    --secondary-400: 0.83 0.051 350;
    --secondary-500: 0.79 0.055 350;
    --secondary-600: 0.71 0.052 350;
    --secondary-700: 0.62 0.047 350;
    --secondary-800: 0.51 0.040 350;
    --secondary-900: 0.40 0.032 350;
    --secondary-950: 0.29 0.023 350;
    --foreground-50: 0.98 0.000 0;
    --foreground-100: 0.95 0.000 0;
    --foreground-200: 0.89 0.000 0;
    --foreground-300: 0.78 0.000 0;
    --foreground-400: 0.67 0.000 0;
    --foreground-500: 0.56 0.000 0;
    --foreground-600: 0.46 0.000 0;
    --foreground-700: 0.38 0.000 0;
    --foreground-800: 0.29 0.000 0;
    --foreground-900: 0.20 0.000 0;
    --foreground-950: 0.14 0.000 0;
  }
  body {
    font-family: var(--font-body);
    background-color: oklch(var(--background-50));
    color: oklch(var(--foreground-950));
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  @keyframes blob {
    0% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      transform: rotate(0deg) scale(1);
    }
    33% {
      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
      transform: rotate(120deg) scale(1.05);
    }
    66% {
      border-radius: 50% 40% 60% 50% / 40% 50% 60% 50%;
      transform: rotate(240deg) scale(0.95);
    }
    100% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      transform: rotate(360deg) scale(1);
    }
  }
}
.prose-article {
  color: oklch(var(--foreground-700));
  font-size: 0.9375rem;
  line-height: 1.75;
}
.prose-article h2 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: oklch(var(--foreground-950));
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid oklch(var(--primary-200));
}
.prose-article h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: oklch(var(--foreground-900));
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.prose-article p {
  margin-bottom: 1rem;
}
.prose-article ul,
.prose-article ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}
.prose-article ul {
  list-style-type: disc;
}
.prose-article ol {
  list-style-type: decimal;
}
.prose-article li {
  margin-bottom: 0.4rem;
}
.prose-article strong {
  font-weight: 700;
  color: oklch(var(--foreground-900));
}
@layer utilities {
  .animate-blob {
    animation: blob 8s ease-in-out infinite;
  }
  .animate-blob-slow {
    animation: blob 12s ease-in-out infinite;
  }
  .animate-blob-delayed {
    animation: blob 10s ease-in-out infinite 3s;
  }
}