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

@layer components {
  .ui-card {
    @apply rounded-2xl bg-white/80 shadow-card ring-1 ring-black/5 backdrop-blur;
  }

  .ui-input {
    @apply w-full rounded-xl border bg-white/70 px-4 py-3 text-sm outline-none transition
           placeholder:text-gray-400 focus:bg-white focus:ring-4;
    border-color: theme(colors.ing.orange2);
  }

  .ui-input:focus {
    --tw-ring-color: rgba(255, 145, 0, 0.18);
  }

  .ui-btn-primary {
    @apply w-full rounded-xl px-4 py-3 text-sm font-semibold text-white shadow-sm transition
           active:scale-[0.99] disabled:opacity-60;
    background: linear-gradient(180deg, #FF9100 0%, #D88219 100%);
  }

  .ui-link {
    @apply text-sm font-medium;
    color: theme(colors.ing.orange2);
  }
}