@import 'tailwindcss';

@theme {
  --color-doctor-primary: #21bace; /* A vibrant teal, good for primary buttons or highlights */
  --color-doctor-secondary: #42b3ce; /* A slightly lighter teal, good for secondary elements */
  --color-doctor-dark: #06688e; /* A deep blue, good for headers or accents */
  --color-doctor-light: #76d6f4; /* A light sky blue, good for backgrounds or hover states */
  --color-doctor-pale: #bbdfef; /* A very pale blue, good for subtle backgrounds or borders */
}

:root {
  --font-heading: 'Tajawal', sans-serif;
  --font-body: 'Cairo', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading), sans-serif;
}

body,
p {
  font-family: var(--font-body), sans-serif;
}

/* Global Scrollbar Styles */

/* Webkit Browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 7px; /* Width of the vertical scrollbar */
  height: 7px; /* Height of the horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: #e5e7eb; /* Light gray track (Tailwind's gray-200) */
  border-radius: 5px; /* Rounded corners for the track */
}

*::-webkit-scrollbar-thumb {
  background: #6b7280; /* Gray thumb (Tailwind's gray-500) */
  border-radius: 5px; /* Rounded corners for the thumb */
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}

*::-webkit-scrollbar-thumb:hover {
  background: #4b5563; /* Darker gray on hover (Tailwind's gray-600) */
}