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

/* Base font family for the entire website */
body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Ensure all elements inherit Inter font */
* {
  font-family: inherit;
}

/* Loopdesk Brand Colors */
:root {
  /* Primary brand colors from logo */
  --primary-yellow: #fbc841;
  --primary-teal: #53b5bc;
  --secondary-gray-green: #9aa3a0;
  --dark-gray: #7c7470;
  
  /* Tailwind-compatible color variations */
  --yellow-400: #fbc841;
  --yellow-500: #f5c02f;
  --yellow-600: #e6a920;
  --yellow-700: #d19013;
  
  --teal-400: #6bc5ca;
  --teal-500: #53b5bc;
  --teal-600: #479ea4;
  --teal-700: #3d878c;
  
  --cyan-700: #0e7490;
  
  --gray-400: #9aa3a0;
  --gray-500: #8a938f;
  --gray-600: #7c7470;
  --gray-700: #6d645f;
}

/* Custom Tailwind classes for brand colors */
.bg-brand-primary { background-color: var(--primary-teal); }
.bg-brand-primary-hover:hover { background-color: var(--teal-700); }
.text-brand-primary { color: var(--primary-teal); }
.text-brand-accent { color: var(--primary-yellow); }
.border-brand-primary { border-color: var(--primary-teal); }

.bg-brand-yellow { background-color: var(--primary-yellow); }
.bg-brand-yellow-hover:hover { background-color: var(--yellow-600); }
.text-brand-yellow { color: var(--primary-yellow); }
.border-brand-yellow { border-color: var(--primary-yellow); }

.bg-brand-teal { background-color: var(--primary-teal); }
.bg-brand-teal-hover:hover { background-color: var(--teal-700); }
.text-brand-teal { color: var(--primary-teal); }
.border-brand-teal { border-color: var(--primary-teal); }

.bg-brand-gray-green { background-color: var(--secondary-gray-green); }
.text-brand-gray-green { color: var(--secondary-gray-green); }
.border-brand-gray-green { border-color: var(--secondary-gray-green); }

.bg-brand-dark-gray { background-color: var(--dark-gray); }
.text-brand-dark-gray { color: var(--dark-gray); }
.border-brand-dark-gray { border-color: var(--dark-gray); }

/* Hover states */
.hover\:text-brand-teal:hover { color: var(--primary-teal); }
.hover\:text-brand-yellow:hover { color: var(--primary-yellow); }
.hover\:text-brand-gray-green:hover { color: var(--secondary-gray-green); }
.hover\:text-brand-dark-gray:hover { color: var(--dark-gray); }

.hover\:bg-brand-teal:hover { background-color: var(--primary-teal); }
.hover\:bg-brand-yellow:hover { background-color: var(--primary-yellow); }
.hover\:bg-brand-dark-gray:hover { background-color: var(--dark-gray); }

/* Focus states */
.focus\:ring-brand-teal:focus { 
    --tw-ring-color: var(--primary-teal); 
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color);
}

.focus\:border-brand-teal:focus { border-color: var(--primary-teal); }
.focus\:border-brand-gray-green:focus { border-color: var(--secondary-gray-green); }