/* ==========================================================================
   BUTTON COMPONENTS
   Based on: PHASE_7B_DESIGN_PREMIUM_SPEC.md - Button Section
   
   Variants: primary, secondary
   States: rest, hover, active, focus, disabled, loading
   ========================================================================== */

/* ==========================================================================
   BASE BUTTON
   ========================================================================== */

.btn {
  /* Dimensions */
  height: 56px;
  padding: 0 var(--space-xl);  /* 32px horizontal */
  
  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);  /* Spacing între icon și text */
  
  /* Appearance */
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  
  /* Behavior */
  transition: all var(--transition-base);
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  white-space: nowrap;
}

/* ==========================================================================
   PRIMARY BUTTON
   ========================================================================== */

.btn--primary {
  background: var(--color-red-600);
  color: var(--color-white);
  box-shadow: var(--shadow-default);
}

/* STATE: HOVER */
.btn--primary:hover:not(:disabled) {
  background: var(--color-red-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

/* STATE: ACTIVE (click) */
.btn--primary:active:not(:disabled) {
  background: var(--color-red-800);
  transform: translateY(0);
  box-shadow: var(--shadow-subtle);
  transition: all var(--transition-fast);
}

/* STATE: FOCUS (keyboard) */
.btn--primary:focus-visible {
  box-shadow: var(--shadow-focus-accent);
  outline: none;
}

/* STATE: DISABLED */
.btn--primary:disabled {
  background: var(--color-gray-200);
  color: var(--color-gray-400);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   SECONDARY BUTTON
   ========================================================================== */

.btn--secondary {
  background: var(--color-white);
  color: var(--color-gray-600);
  border: 2px solid var(--color-gray-200);
  box-shadow: var(--shadow-subtle);
}

/* STATE: HOVER */
.btn--secondary:hover:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-800);
  box-shadow: var(--shadow-default);
}

/* STATE: ACTIVE */
.btn--secondary:active:not(:disabled) {
  background: var(--color-gray-100);
  transform: translateY(0);
}

/* STATE: FOCUS */
.btn--secondary:focus-visible {
  box-shadow: var(--shadow-focus-strong);
  outline: none;
}

/* STATE: DISABLED */
.btn--secondary:disabled {
  background: var(--color-gray-100);
  border-color: var(--color-gray-200);
  color: var(--color-gray-400);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ==========================================================================
   BUTTON ICON
   ========================================================================== */

.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.btn--loading {
  position: relative;
  cursor: wait;
  pointer-events: none;
}

.btn__text--hidden {
  opacity: 0;
}

.btn__spinner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner pentru button secondary */
.btn--secondary .btn__spinner {
  border-color: var(--color-gray-300);
  border-top-color: var(--color-gray-600);
}

/* ==========================================================================
   SIZE VARIANTS (opțional, pentru viitor)
   ========================================================================== */

.btn--small {
  height: 40px;
  padding: 0 var(--space-lg);
  font-size: var(--font-size-sm);
}

.btn--large {
  height: 64px;
  padding: 0 var(--space-2xl);
  font-size: var(--font-size-lg);
}

/* ==========================================================================
   FULL WIDTH (pentru mobile)
   ========================================================================== */

.btn--full {
  width: 100%;
}