/*
 * Dispo2 Application Styles
 * Mobile-first design system with Tailwind CSS
 */

/* ========================================
   DESIGN TOKENS (CSS Custom Properties)
   ======================================== */

:root {
  /* Colors - Primary Palette */
  --color-primary-50: #E8F5E9;
  --color-primary-100: #C8E6C9;
  --color-primary-200: #A5D6A7;
  --color-primary-300: #81C784;
  --color-primary-400: #66BB6A;
  --color-primary-500: #4CAF50;
  --color-primary-600: #43A047;
  --color-primary-700: #388E3C;
  --color-primary-800: #2E7D32;
  --color-primary-900: #1B5E20;

  /* Colors - Neutral Palette */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #EEEEEE;
  --color-neutral-300: #E0E0E0;
  --color-neutral-400: #BDBDBD;
  --color-neutral-500: #9E9E9E;
  --color-neutral-600: #757575;
  --color-neutral-700: #616161;
  --color-neutral-800: #424242;
  --color-neutral-900: #212121;

  /* Colors - Semantic */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #DC2626;
  --color-info: #2196F3;

  /* Colors - RSVP Status */
  --color-rsvp-yes: #4CAF50;
  --color-rsvp-no: #DC2626;
  --color-rsvp-maybe: #FF9800;
  --color-rsvp-waiting: #9E9E9E;

  /* Colors - Brand */
  --color-whatsapp: #25D366;

  /* Colors - Dark variants for text */
  --color-success-dark: #2E7D32;
  --color-error-dark: #C62828;

  /* Typography */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Transitions */
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Touch Targets */
  --touch-target-min: 44px;
}

/* Base Resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-primary);
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tailwind CSS v4 */
@import "tailwindcss";

/* ========================================
   CUSTOM UTILITIES
   ======================================== */

/* Primary color utilities */
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }

.text-primary-50 { color: var(--color-primary-50); }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }

.border-primary-50 { border-color: var(--color-primary-50); }
.border-primary-100 { border-color: var(--color-primary-100); }
.border-primary-200 { border-color: var(--color-primary-200); }
.border-primary-300 { border-color: var(--color-primary-300); }
.border-primary-400 { border-color: var(--color-primary-400); }
.border-primary-500 { border-color: var(--color-primary-500); }
.border-primary-600 { border-color: var(--color-primary-600); }
.border-primary-700 { border-color: var(--color-primary-700); }
.border-primary-800 { border-color: var(--color-primary-800); }
.border-primary-900 { border-color: var(--color-primary-900); }

/* Hover states for primary colors */
.hover\:bg-primary-50:hover { background-color: var(--color-primary-50); }
.hover\:bg-primary-100:hover { background-color: var(--color-primary-100); }
.hover\:bg-primary-500:hover { background-color: var(--color-primary-500); }
.hover\:bg-primary-600:hover { background-color: var(--color-primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }

/* Active states for primary colors */
.active\:bg-primary-700:active { background-color: var(--color-primary-700); }

/* Focus ring colors */
.focus\:border-primary-500:focus { border-color: var(--color-primary-500); }
.focus\:ring-primary-100:focus { --tw-ring-color: var(--color-primary-100); }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500); }

/* RSVP status colors */
.bg-rsvp-yes { background-color: var(--color-rsvp-yes); }
.bg-rsvp-no { background-color: var(--color-rsvp-no); }
.bg-rsvp-maybe { background-color: var(--color-rsvp-maybe); }
.bg-rsvp-waiting { background-color: var(--color-rsvp-waiting); }

.text-rsvp-yes { color: var(--color-rsvp-yes); }
.text-rsvp-no { color: var(--color-rsvp-no); }
.text-rsvp-maybe { color: var(--color-rsvp-maybe); }
.text-rsvp-waiting { color: var(--color-rsvp-waiting); }

.border-rsvp-yes { border-color: var(--color-rsvp-yes); }
.border-rsvp-no { border-color: var(--color-rsvp-no); }
.border-rsvp-maybe { border-color: var(--color-rsvp-maybe); }
.border-rsvp-waiting { border-color: var(--color-rsvp-waiting); }

/* Semantic colors */
.bg-success { background-color: var(--color-success); }
.bg-error { background-color: var(--color-error); }
.bg-warning { background-color: var(--color-warning); }
.bg-info { background-color: var(--color-info); }

.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

.border-success { border-color: var(--color-success); }
.border-error { border-color: var(--color-error); }
.border-warning { border-color: var(--color-warning); }
.border-info { border-color: var(--color-info); }

/* Brand colors */
.bg-whatsapp { background-color: var(--color-whatsapp); }
.text-whatsapp { color: var(--color-whatsapp); }

/* Dark text variants */
.text-success-dark { color: var(--color-success-dark); }
.text-error-dark { color: var(--color-error-dark); }

/* Typography utilities */
.text-h1 { font-size: var(--font-size-h1); line-height: 1.25; font-weight: 700; }
.text-h2 { font-size: var(--font-size-h2); line-height: 1.33; font-weight: 600; }
.text-h3 { font-size: var(--font-size-h3); line-height: 1.4; font-weight: 600; }
.text-h4 { font-size: var(--font-size-h4); line-height: 1.33; font-weight: 500; }
.text-body { font-size: var(--font-size-body); line-height: 1.5; }
.text-body-sm { font-size: var(--font-size-body-sm); line-height: 1.43; }
.text-caption { font-size: var(--font-size-caption); line-height: 1.33; font-weight: 500; letter-spacing: 0.5px; }

/* Utility for bold body text (for initials in avatars) */
.text-body-bold { font-size: var(--font-size-body); line-height: 1.5; font-weight: 700; }

/* Touch target utilities */
.min-h-touch { min-height: var(--min-height-touch); }
.min-w-touch { min-width: var(--min-width-touch); }

/* Transition utilities */
.duration-base { transition-duration: var(--transition-duration-base); }

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Animation utilities */
.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-shimmer {
  background: linear-gradient(90deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-100) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Stagger delays for sequential animations */
.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

/* Hover lift effect */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover-lift:active {
  transform: translateY(0);
}

/* ========================================
   FORM OVERRIDES
   ======================================== */

/* Small checkbox override for @tailwindcss/forms plugin */
input[type="checkbox"].small-checkbox {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

*:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   LANDING PAGE SPECIFIC STYLES
   ======================================== */

/* Semantic color shades for landing backgrounds */
.bg-success-50 {
  background-color: #E8F5E9;
}

.bg-success-100 {
  background-color: #C8E6C9;
}

.bg-info-50 {
  background-color: #E3F2FD;
}

.bg-info-100 {
  background-color: #BBDEFB;
}

.bg-warning-50 {
  background-color: #FFF3E0;
}

.bg-warning-100 {
  background-color: #FFE0B2;
}

/* Button Components */
.btn-primary {
  background-color: #4CAF50;
  color: white;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 12px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-primary:hover {
  background-color: #43A047;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-primary:active {
  background-color: #388E3C;
  transform: scale(0.98);
}

.btn-primary:disabled {
  background-color: #EEEEEE;
  color: #9E9E9E;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background-color: transparent;
  color: #43A047;
  border: 1px solid #4CAF50;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-secondary:hover {
  background-color: #E8F5E9;
  border-color: #43A047;
}

.btn-secondary:active {
  background-color: #C8E6C9;
  transform: scale(0.98);
}

.btn-secondary:disabled {
  border-color: #E0E0E0;
  color: #9E9E9E;
  cursor: not-allowed;
}

.btn-danger {
  background-color: #DC2626;
  color: white;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 12px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-danger:hover {
  background-color: #B91C1C;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-danger:active {
  background-color: #991B1B;
  transform: scale(0.98);
}

.btn-danger:disabled {
  background-color: #EEEEEE;
  color: #9E9E9E;
  cursor: not-allowed;
  box-shadow: none;
}

/* Gradients for special elements */
.bg-info-gradient {
  background: linear-gradient(to bottom right, #3B82F6, #2563EB);
}

.bg-success-gradient {
  background: linear-gradient(to bottom right, #4CAF50, #43A047);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Landing section spacing */
.landing-page section {
  scroll-margin-top: 2rem;
}