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

.form-label {
  @apply block text-sm text-soft mb-1;
}

.form-input {
  @apply w-full bg-deep border border-nebula-500/30 rounded-lg px-4 py-2
         text-white placeholder-gray-500
         focus:outline-none focus:ring-2 focus:ring-accent;
}

.form-textarea {
  @apply w-full bg-deep border border-nebula-500/30 rounded-lg px-4 py-2
         text-white resize-none
         focus:outline-none focus:ring-2 focus:ring-accent;
}

.form-file {
  @apply w-full text-sm text-soft
         file:bg-panel file:border-0 file:px-4 file:py-2
         file:rounded-lg file:text-white
         hover:file:bg-nebula-600/40;
}

.btn-primary {
  @apply bg-accent text-deep px-6 py-2 rounded-lg
         font-medium hover:brightness-110 transition;
}

.btn-secondary {
  @apply bg-nebula-500/30 text-white px-5 py-2 rounded-lg
         hover:bg-nebula-500/50 transition;
}

@layer components {
  /* Ensure plain inputs, textareas and selects match the dark form styles
     so we don't end up with white backgrounds + white text. */
  input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    @apply bg-deep text-white border border-nebula-500/30 rounded-lg px-4 py-2
           placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-accent;
  }

  /* Keep file inputs styled separately (file controls use .form-file class).
     This prevents the native file button from inheriting the same padding. */
  input[type="file"] {
    @apply bg-transparent text-soft p-0;
  }
}


@layer base {
  *,:before,:after {
    box-sizing: border-box;
    border: 0 solid transparent;
  }
}