/* Shared Styles for arrhen.me */

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

:root {
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --text-primary: #1F2937;
  --text-secondary: #4B5563;
  --bg-light: #F9FAFB;
  --bg-dark: #111827;
  --border-color: #E5E7EB;
}

/* Base Styles */
body {
  @apply font-sans text-gray-700 leading-relaxed bg-white;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Header */
.header {
  @apply bg-white shadow-sm sticky top-0 z-50;
}

.nav-container {
  @apply container mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between;
}

.nav-logo {
  @apply text-lg sm:text-xl font-bold text-primary whitespace-nowrap;
}

.nav-menu {
  @apply flex gap-3 sm:gap-5 text-sm sm:text-base;
}

.nav-link {
  @apply text-gray-600 hover:text-primary transition-colors duration-200 font-medium whitespace-nowrap;
}

.nav-link.active {
  @apply text-primary font-semibold;
}

/* Footer */
.footer {
  @apply bg-gray-900 text-gray-400 py-12;
}

.footer-container {
  @apply container mx-auto px-4 sm:px-6 lg:px-8;
}

.footer-grid {
  @apply grid grid-cols-1 md:grid-cols-4 gap-8 mb-8;
}

.footer-heading {
  @apply text-white text-lg font-semibold mb-4;
}

.footer-link {
  @apply text-gray-400 hover:text-white transition-colors duration-200 block mb-2;
}

.footer-social {
  @apply flex items-center space-x-4 mt-4;
}

/* Buttons */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm transition-colors duration-200;
}

.btn-primary {
  @apply bg-primary text-white hover:bg-primary-hover;
}

.btn-outline {
  @apply border-gray-300 text-gray-700 bg-white hover:bg-gray-50;
}

/* Cards */
.card {
  @apply bg-white rounded-lg shadow-sm overflow-hidden border border-gray-100 hover:shadow-md transition-shadow duration-200;
}

.card-header {
  @apply p-6 pb-0;
}

.card-body {
  @apply p-6;
}

.card-footer {
  @apply p-6 pt-0 border-t border-gray-100;
}

/* Forms */
.input {
  @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-1 focus:ring-primary;
}

/* Utilities */
.section {
  @apply py-16 md:py-20;
}

.container-narrow {
  @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Animation */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .nav-menu {
    @apply hidden;
  }
  
  /* Add mobile menu styles here */
}