/* theme.css */

/* Global design tokens */
:root {
  /* 🎨 Colors */
  --primary-color: #0764B9;        /* Tailwind blue-500 */
  --primary-color-hover: #3181cc;  /* Tailwind blue-700 */
  --secondary-color: #FF7124;
  --secondary-color-hover: #f5600f;
  --base-color: #f4f4f5;      /* Tailwind zinc-100 */
  --base-color-hover: #d4d4d8;/* Tailwind zinc-300 */
  --text-color: #1f2937;           /* Tailwind gray-800 */
  --background-color: #ffffff;

  /* 🔤 Fonts */
  --font-primary: Segoe UI, Tahoma, Geneva, Verdana, sans-serif
  --font-secondary: Verdana, Geneva, sans-serif
}

/* 👕 Usage examples */
body {
  font-family: var(--font-primary);
  background-color: var(--background-color);
  color: var(--text-color);
}


.btn-primary {
  background-color: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s ease-in-out;
  font-family: var(--font-primary);
}

.btn-primary:hover {
  background-color: var(--primary-color-hover);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--text-color);
  font-family: var(--font-primary);
}

.btn-secondary:hover {
  background-color: var(--secondary-color-hover);
}

.btn-secondary-outshadow { 
  background-color: var(--base-color);
  color: var(--text-color);
  font-family: var(--font-primary);
}

.btn-secondary-outshadow:hover { 
  background-color: var(--base-color-hover);
  color: var(--text-color);
  font-family: var(--font-primary);
}


.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

main { 
  margin-top: 6rem;
}