@import "tailwindcss";
@plugin "@tailwindcss/typography";

:root {
  --background: #fafafa;
  --foreground: #1a1a1a;
  --surface: #ffffff;
  --muted: #6b7280;
  --border: #e5e7eb;
  --red: #dc2626;
  --red-dark: #991b1b;
  --red-light: #fef2f2;
  --red-muted: #fca5a5;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --color-red: var(--red);
  --color-red-dark: var(--red-dark);
  --color-red-light: var(--red-light);
  --color-red-muted: var(--red-muted);
  --font-sans: var(--font-vazirmatn);
  --font-display: var(--font-syne);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-vazirmatn), system-ui, sans-serif;
}

.font-display {
  font-family: var(--font-syne), var(--font-vazirmatn), sans-serif;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-up {
  animation: fade-up 0.6s ease-out both;
}

.animate-slide-in {
  animation: slide-in 0.5s ease-out both;
}

.carousel-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.prose img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}