/* Podstawowe ustawienia wspólne */
.btn {
  @apply inline-flex items-center justify-center 
         font-semibold rounded-lg px-6 py-3
         text-base transition-all duration-200
         cursor-pointer select-none;
}

/* Wariant główny */
.btn-primary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn-primary:hover {
  filter: brightness(0.95);
}

/* Wariant outline */
.btn-outline {
  background-color: transparent;
  border: 2px solid var(--btn-outline-border);
  color: var(--btn-outline-text);
}

.btn-outline:hover {
  background-color: var(--btn-outline-bg-hover);
}

/* Wariant ghost (bez obramowania) */
.btn-ghost {
  background-color: transparent;
  color: var(--btn-ghost-text);
}

.btn-ghost:hover {
  background-color: var(--btn-ghost-hover-bg);
}

.fuz-input {
  width: 100%;
  padding: 0.75rem 1rem; /* bardziej eleganckie */
  border-radius: 0.75rem;

  /* Kolory z theme.css */
  background-color: var(--fuz-bg);
  color: var(--fuz-text);
  border: 1px solid var(--fuz-border, #d1d5db); /* fallback dla bezpieczeństwa */

  box-shadow: 0 1px 2px rgba(0,0,0,0.06);

  transition: all 0.2s ease;
}

/* Hover odcien zależny od border, nie od Tailwind */
.fuz-input:hover {
  border-color: var(--fuz-text);
  opacity: 0.9;
}

/* Placeholder — używa fuz-text ale jaśniejszy */
.fuz-input::placeholder {
  color: color-mix(in srgb, var(--fuz-text) 40%, transparent);
}

/* Focus — używa accent */
.fuz-input:focus {
  outline: none;
  border-color: var(--fuz-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fuz-accent) 40%, transparent);
}

/* Error */
.fuz-input-error {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.3) !important;
}

/* Disabled */
.fuz-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: color-mix(in srgb, var(--fuz-bg) 80%, #888);
}

/* Textarea */
textarea.fuz-input {
  resize: none;
}
