/**
 * Button Component
 * enermaind Design System
 *
 * Usage: Add class .btn with variant classes
 * Variants: .btn-primary, .btn-secondary, .btn-tertiary, .btn-outline
 * Sizes: .btn-sm, .btn-lg
 * States: :hover, :focus, :active, :disabled
 */

.btn {
  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--component-gap-sm);

  /* Typography - Bold emphasis per corporate design */
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  text-decoration: none;

  /* Spacing */
  padding: var(--component-padding-sm) var(--component-padding-md);

  /* Visual */
  border: 2px solid white;
  border-radius: var(--radius-md);
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);

  /* Interaction */
  cursor: pointer;
  transition: all var(--duration-normal) var(--easing-ease-out);
  user-select: none;

  /* Remove default button styles */
  appearance: none;
  -webkit-appearance: none;
}

/* Hover state */
.btn:hover {
  background-color: var(--color-brand-primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Focus state */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 145, 67, 0.3);
}

/* Active/pressed state */
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
  background-color: var(--color-interactive-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ========================================
   VARIANTS
   ======================================== */

/* Primary Button (default) */
.btn-primary {
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-brand-primary-hover);
}

/* Secondary Button - Sonnenorange */
.btn-secondary {
  background-color: var(--color-brand-secondary);
  color: var(--color-text-primary);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-brand-secondary-hover);
}

/* Tertiary Button - Light background */
.btn-tertiary {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: transparent;
  box-shadow: none;
}

.btn-tertiary:hover:not(:disabled) {
  background-color: var(--color-neutral-200);
}

/* Outline Button */
.btn-outline {
  background-color: transparent;
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  box-shadow: none;
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

/* Accent Button - Meeresblau */
.btn-accent {
  background-color: var(--color-brand-accent);
  color: var(--color-text-inverse);
}

.btn-accent:hover:not(:disabled) {
  background-color: var(--color-brand-accent-hover);
}

/* ========================================
   SIZES
   ======================================== */

/* Small Button */
.btn-sm {
  font-size: var(--font-size-sm);
  padding: var(--component-padding-xs) var(--component-padding-sm);
}

/* Large Button */
.btn-lg {
  font-size: var(--font-size-md);
  padding: var(--component-padding-md) var(--component-padding-lg);
}

/* Full Width Button */
.btn-block {
  width: 100%;
  display: flex;
}

/* ========================================
   ICON SUPPORT
   ======================================== */

.btn-icon-only {
  padding: var(--component-padding-sm);
  aspect-ratio: 1;
}

.btn-icon-left {
  padding-left: var(--component-padding-sm);
}

.btn-icon-right {
  padding-right: var(--component-padding-sm);
}