/**
 * BASE.CSS
 * Variabili, reset, fondamenta e animations
 */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --secondary: #8b5cf6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --light: #f8fafc;
  --dark: #0f172a;
  --gray: #64748b;
  --light-gray: #e2e8f0;
  --border: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Chart Colors (per grafici dashboard) */
  --chart-1: #3b82f6;  /* Blu (primary) */
  --chart-2: #10b981;  /* Verde (success) */
  --chart-3: #f59e0b;  /* Arancione (warning) */
  --chart-4: #8b5cf6;  /* Viola (secondary) */
  --chart-5: #ef4444;  /* Rosso (danger) */
  --chart-6: #06b6d4;  /* Cyan */
}

/* ========================================
   RESET
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========================================
   BODY
   ======================================== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  min-height: 100vh;
  padding: 12px;
  color: var(--dark);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUpModal {
  from { 
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========================================
   SCROLLBAR CUSTOM
   ======================================== */
.search-results::-webkit-scrollbar {
  width: 6px;
}

.search-results::-webkit-scrollbar-track {
  background: var(--light-gray);
}

.search-results::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}