@import "tailwindcss";

/* ============================================
   FOCOLARI VOTING SYSTEM - Design Tokens
   ============================================ */

@theme {
  /* Colori Istituzionali */
  --color-focolare-blue: #0072CE;
  --color-focolare-blue-dark: #005BA1;
  --color-focolare-blue-light: #3D9BE0;

  --color-focolare-orange: #F5A623;
  --color-focolare-orange-dark: #D4891C;
  --color-focolare-orange-light: #FFB84D;

  --color-focolare-yellow: #FFD700;
  --color-focolare-yellow-dark: #CCA300;
  --color-focolare-yellow-light: #FFE44D;

  /* Stati */
  --color-success: #22C55E;
  --color-success-dark: #16A34A;
  --color-error: #EF4444;
  --color-error-dark: #DC2626;
  --color-warning: #F59E0B;
}

/* ============================================
   Global Styles
   ============================================ */

l:root {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

#root {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ============================================
   Tablet-Optimized Touch Styles
   ============================================ */

button,
.touch-target {
  min-height: 48px;
  min-width: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input {
  font-size: 16px; /* Previene zoom su iOS */
}

/* ============================================
   Animazioni
   ============================================ */

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.8);
  }
}

@keyframes pulse-error {
  0%, 100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
  }
}

@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.4;
  }
}

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

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

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-pulse-error {
  animation: pulse-error 1s ease-in-out infinite;
}

.animate-blink {
  animation: blink 1.5s step-start infinite;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* ============================================
   Utility Classes
   ============================================ */

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}