@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    background: #f6f8fb;
  }

  body {
    background: #f6f8fb;
    color: #142033;
  }
}

@layer components {
  .surface-panel {
    @apply bg-white border border-slate-200 shadow-soft;
  }

  .control-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.25s ease-out; }

/* Hover animation utilities */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hover-glow {
  transition: box-shadow 0.2s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
