@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Custom colors - matching your Tailwind config */
  --color-primary-black: #000000;
  --color-primary-white: #F9FAFB;
  --color-primary-light-gray: #e5e5e5;
  --color-accent-teal: #2d7d7d;
  --color-accent-lime-green: #c4d82f;
  --color-accent-magenta: #e91e63;
  --color-accent-pink: #e91e63;
  
  /* Fonts */
  --font-montserrat: 'Montserrat', sans-serif;
  --font-inter: 'Inter', system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-inter);
  color: var(--color-primary-black);
  background-color: #f8f9fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

/* Container utility */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 640px) {
  .container { padding: 0 24px; }
}

@media (min-width: 1024px) {
  .container { padding: 0 32px; }
}

/* Utility classes matching Tailwind */
.font-montserrat { font-family: var(--font-montserrat); }
.font-sans { font-family: var(--font-inter); }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-3xl { font-size: 1.875rem; }
.text-2xl { font-size: 1.5rem; }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
.text-center { text-align: center; }

/* Color utilities */
.bg-primary-white { background-color: var(--color-primary-white); }
.bg-primary-light-gray { background-color: var(--color-primary-light-gray); }
.bg-accent-teal { background-color: var(--color-accent-teal); }
.text-primary-black { color: var(--color-primary-black); }
.text-primary-white { color: var(--color-primary-white); }
.text-accent-teal { color: var(--color-accent-teal); }

/* Layout utilities */
.flex { display: flex; }
.hidden { display: none; }
.block { display: block; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-8 > * + * { margin-left: 2rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }

/* Spacing utilities */
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-10 { margin-left: 2.5rem; }
.mr-2 { margin-right: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.h-16 { height: 4rem; }
.h-6 { height: 1.5rem; }
.w-6 { width: 1.5rem; }
.p-2 { padding: 0.5rem; }

/* Border utilities */
.border-b { border-bottom: 1px solid #e5e7eb; }
.rounded-md { border-radius: 0.375rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* Interaction utilities */
.cursor-pointer { cursor: pointer; }
.transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; }

/* Responsive utilities */
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:hidden { display: none; }
}

/* Focus states */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--color-accent-teal); }

/* Remove underlines from all links except when explicitly requested */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Allow hover:underline class to work */
.hover\:underline:hover {
  text-decoration: underline !important;
}

/* Hover states */
.hover\:bg-primary-light-gray:hover { background-color: var(--color-primary-light-gray); }
.hover\:text-accent-teal:hover { color: var(--color-accent-teal); }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}