canina/frontend/application/app/globals.css

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn-v33.003/fonts/webfonts/Vazirmatn[wght].woff2') format('woff2-variations'),
       url('/fonts/vazirmatn-v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Shabnam';
  src: url('/fonts/shabnam-font-v5.0.1/Shabnam.woff2') format('woff2'),
       url('/fonts/shabnam-font-v5.0.1/Shabnam.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Shabnam';
  src: url('/fonts/shabnam-font-v5.0.1/Shabnam-Bold.woff2') format('woff2'),
       url('/fonts/shabnam-font-v5.0.1/Shabnam-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Shabnam';
  src: url('/fonts/shabnam-font-v5.0.1/Shabnam-Medium.woff2') format('woff2'),
       url('/fonts/shabnam-font-v5.0.1/Shabnam-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sahel';
  src: url('/fonts/sahel-font-v3.4.0/Sahel-VF.woff2') format('woff2-variations'),
       url('/fonts/sahel-font-v3.4.0/Sahel.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lalezar';
  src: url('/fonts/Lalezar-Font-fontyab.com_/Lalezar-Font/TTF/Lalezar-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IranNastaliq';
  src: url('/fonts/IranNastaliq/IranNastaliq/IranNastaliq.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IranianSans';
  src: url('/fonts/A-Iranian-Sans/A-Iranian-Sans/Iranian Sans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@import "tailwindcss";

@theme {
  --font-sans: var(--font-vazir), "Vazirmatn", system-ui, sans-serif;
  --font-vazir: var(--font-vazir), "Vazirmatn", sans-serif;
  --font-shabnam: "Shabnam", sans-serif;
  --font-sahel: "Sahel", sans-serif;
  --font-lalezar: var(--font-lalezar), "Lalezar", cursive;
  --font-nastaliq: "IranNastaliq", serif;
  --font-iranian-sans: "IranianSans", 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: #9BC8CC;    /* card backgrounds / accent borders */
  --color-medical-gray-500: #6B8B8E;    /* secondary text */
  --color-medical-gray-600: #4A6366;    /* muted dark text */
  --color-medical-gray-700: #2C3E42;    /* deep text */
  --color-medical-gray-800: #19272B;    /* 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;
}