@import "tailwindcss";

@theme {
  --font-sans: var(--font-vazir), system-ui, -apple-system, sans-serif;
  --font-vazir: var(--font-vazir), sans-serif;
  --font-shabnam: var(--font-vazir), sans-serif;
  --font-sahel: var(--font-vazir), sans-serif;
  --font-lalezar: var(--font-lalezar), cursive, sans-serif;
  --font-nastaliq: "IranNastaliq", serif;
  --font-iranian-sans: var(--font-vazir), sans-serif;
  
  /* Brand Colors */
  --color-canina-blue: #1E4053;
  --color-canina-gold: #F1B646;
  --color-canina-teal: #9BC8CC;
  --color-canina-dark: #060709;
  
  /* Core UI Medical Gray Palette */
  --color-medical-gray-50: #FFFFFF;     /* pure white main background */
  --color-medical-gray-100: #F4F7F6;    /* light warm gray for alternate sections */
  --color-medical-gray-200: #E5ECE9;    /* light box background / border color */
  --color-medical-gray-300: #C2D5CE;    /* subtle borders */
  --color-medical-gray-400: #7A9B9F;    /* card backgrounds / accent borders */
  --color-medical-gray-500: #445D60;    /* secondary text - WCAG AA > 5.2:1 contrast */
  --color-medical-gray-600: #33484B;    /* muted dark text */
  --color-medical-gray-700: #202F32;    /* deep text */
  --color-medical-gray-800: #141F22;    /* very dark text */
  --color-medical-gray-900: #060709;    /* primary font color / logo */

  /* Standardized Typography Scale */
  --text-3xs: 0.5rem;       /* 8px - micro badges */
  --text-2xs: 0.5625rem;    /* 9px - super micro labels */
  --text-xs-plus: 0.6875rem; /* 11px - fine print, timestamps, meta tags */
  --text-sm-minus: 0.8125rem; /* 13px - compact body */
}

@layer base {
  :root {
    font-family: var(--font-vazir), "Vazirmatn", sans-serif !important;
  }

  html, body {
    font-family: var(--font-vazir), "Vazirmatn", sans-serif !important;
    @apply bg-medical-gray-50 text-medical-gray-900 antialiased max-w-[100vw] overflow-x-hidden;
    font-feature-settings: "ss01", "ss02", "cv01", "cv11";
  }

  button, a {
    cursor: pointer;
  }

  button, a, [role="button"], .cursor-pointer {
    @apply cursor-pointer;
  }

  /* Smooth hover transitions for all interactive elements */
  button, a, .group, .transition-all {
    @apply transition-all duration-300;
  }

  /* Default mild hover effects */
  button:hover, .cursor-pointer:hover {
    @apply opacity-90;
  }

  a:hover {
    @apply opacity-80;
  }
}

@layer utilities {
  .font-vazir {
    font-family: "Vazirmatn";
  }
}

/* Sonner Toasts Vazirmatn Font & Mobile Offset */
[data-sonner-toaster] {
  font-family: "Vazirmatn", sans-serif !important;
}

@media (max-width: 640px) {
  [data-sonner-toaster][data-y-position="top"] {
    top: 76px !important;
  }
}

/* Custom scrollbar for a professional look */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-medical-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-medical-gray-300);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-canina-blue);
}

/* Sleek horizontal scrollbar for categories */
.sleek-hscroll::-webkit-scrollbar {
  height: 6px;
}
.sleek-hscroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 9999px;
}
.sleek-hscroll::-webkit-scrollbar-thumb {
  background: #0052cc;
  border-radius: 9999px;
}
.sleek-hscroll::-webkit-scrollbar-thumb:hover {
  background: #003da6;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}