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

:root {
  color-scheme: dark;
}

html,
body {
  background-color: #09090b; /* zinc-950 */
  color: #fafafa;            /* zinc-50 */
  min-height: 100vh;
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition;
  }
  .btn-primary {
    @apply btn bg-brand-500 text-zinc-950 hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-400;
  }
  .btn-ghost {
    @apply btn text-zinc-300 hover:bg-zinc-800;
  }
  .input {
    @apply block w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm
           text-zinc-100 placeholder-zinc-500 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500;
  }
  .card {
    @apply rounded-lg border border-zinc-800 bg-zinc-900 p-5 shadow-sm;
  }
  .label {
    @apply mb-1 block text-xs font-medium uppercase tracking-wide text-zinc-400;
  }
  .badge {
    @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
  }
  .badge-low { @apply badge bg-brand-900/40 text-brand-300; }
  .badge-medium { @apply badge bg-yellow-900/40 text-yellow-300; }
  .badge-high { @apply badge bg-orange-900/40 text-orange-300; }
  .badge-block { @apply badge bg-red-900/50 text-red-300; }
}

/* Shared float animations for mockup cards (rotation baked in so the cards
   keep their tilt while gently bobbing). */
@keyframes gg-float-cw {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%      { transform: translateY(-7px) rotate(3deg); }
}
@keyframes gg-float-cw-sm {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}
@keyframes gg-float-ccw {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-9px) rotate(-2deg); }
}
@keyframes gg-float-ccw-sm {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(-3deg); }
}

@keyframes gg-ping {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%      { transform: scale(1.6); opacity: 0.3; }
}