@import "tailwindcss";

/* MaidRoute Design Tokens */
@theme {
  /* Colors */
  --color-bg: #F7FAFC;
  --color-surface: #FFFFFF;
  --color-text: #0F172A;
  --color-muted: #64748B;
  --color-primary: #2B3A67;
  --color-secondary: #469EA6;
  --color-accent: #FF7F41;
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;
  --color-border: #E2E8F0;

  /* Font family */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
}

/* Base styles */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Utility classes for common patterns */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary;
}

.btn-secondary {
  @apply border border-secondary text-secondary hover:bg-secondary/10 focus:ring-secondary;
}

.btn-accent {
  @apply bg-accent text-white hover:bg-accent/90 focus:ring-accent;
}

.btn-danger {
  @apply bg-danger text-white hover:bg-danger/90 focus:ring-danger;
}

.card {
  @apply bg-surface border border-border rounded-lg shadow-sm;
}

.input {
  @apply w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
}

.label {
  @apply block text-sm font-medium text-text mb-1;
}

/* Mobile-first responsive utilities */

/* Safe area insets for iOS devices */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
  .btn {
    @apply min-h-[44px];
  }
}

/* Prevent text selection on touch devices for UI elements */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Smooth scrolling on mobile */
.scroll-smooth {
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Mobile sidebar overlay */
@media (max-width: 768px) {
  .sidebar-overlay {
    @apply fixed inset-0 bg-black/50 z-40;
  }
}

/* Responsive card padding */
@media (max-width: 640px) {
  .card {
    @apply rounded-lg;
  }
}

/* Animation for pulsing indicator */
@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  40%, 80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Loading spinner */
.spinner {
  @apply animate-spin h-5 w-5;
}

/* Mobile form improvements */
@media (max-width: 640px) {
  .input {
    @apply text-base; /* Prevents zoom on iOS */
  }

  select.input {
    @apply text-base;
  }
}

/* Active states for touch */
@media (hover: none) {
  .btn:active {
    @apply opacity-80;
  }
}