/* =========================================
   BUTTON SYSTEM
========================================= */


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

.btn {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap:
    var(--space-2);

  padding:
    12px 24px;

  border: none;

  border-radius:
    var(--radius-md);

  font-size:
    var(--text-base);

  font-weight:
    var(--font-semibold);

  cursor: pointer;

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);

  text-align: center;

  white-space: nowrap;

  min-height: 44px;
}

.btn:focus-visible,
button:not([class]):focus-visible {

  outline: none;

  box-shadow:
    0 0 0 4px var(--color-focus-ring);
}


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

.btn-primary {

  background:
    var(--color-primary);

  color:
    var(--color-white);

  box-shadow:
    var(--shadow-sm);
}

.primary-btn {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap:
    var(--space-2);

  min-height: 44px;

  padding:
    12px 22px;

  border-radius:
    var(--radius-md);

  background:
    var(--color-primary);

  color:
    var(--color-white);

  font-weight:
    var(--font-semibold);

  box-shadow:
    var(--shadow-sm);

  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.primary-btn:hover {

  background:
    var(--color-primary-dark);

  transform:
    translateY(-1px);
}


.btn-primary:hover {

  background:
    var(--color-primary-dark);

  transform:
    translateY(-2px);

  box-shadow:
    var(--shadow-md);
}


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

.btn-secondary {

  background:
    var(--color-secondary);

  color:
    var(--color-white);
}


.btn-secondary:hover {

  background:
    var(--color-secondary-light);

  transform:
    translateY(-2px);
}


/* =========================================
   OUTLINE BUTTON
========================================= */

.btn-outline {

  background:
    var(--color-white);

  border:
    1px solid var(--color-border-strong);

  color:
    var(--color-text);
}

.secondary-btn {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap:
    var(--space-2);

  min-height: 44px;

  padding:
    12px 20px;

  border:
    1px solid var(--color-border-strong);

  border-radius:
    var(--radius-md);

  background:
    var(--color-white);

  color:
    var(--color-text);

  font-weight:
    var(--font-semibold);

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.secondary-btn:hover {

  background:
    var(--color-primary-soft);

  border-color:
    var(--color-primary);

  color:
    var(--color-primary-dark);

  transform:
    translateY(-1px);
}


.btn-outline:hover {

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary-dark);

  border-color:
    var(--color-primary);
}


/* =========================================
   GHOST BUTTON
========================================= */

.btn-ghost {

  background:
    transparent;

  color:
    var(--color-text);
}


.btn-ghost:hover {

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary-dark);
}


/* =========================================
   SUCCESS BUTTON
========================================= */

.btn-success {

  background:
    var(--color-success);

  color:
    var(--color-white);
}


/* =========================================
   DANGER BUTTON
========================================= */

.btn-danger {

  background:
    var(--color-danger);

  color:
    var(--color-white);
}


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

.btn-sm {

  padding:
    8px 16px;

  font-size:
    var(--text-sm);
}


.btn-lg {

  padding:
    16px 32px;

  font-size:
    var(--text-lg);
}


/* =========================================
   FULL WIDTH BUTTON
========================================= */

.btn-block {

  width: 100%;
}


/* =========================================
   DISABLED STATE
========================================= */

.btn:disabled {

  opacity: 0.6;

  cursor: not-allowed;

  transform: none !important;
}


/* =========================================
   LEGACY PLAIN BUTTONS
========================================= */

button:not([class]) {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    12px 24px;

  border-radius:
    var(--radius-md);

  background:
    var(--color-primary);

  color:
    var(--color-white);

  font-weight:
    var(--font-semibold);

  box-shadow:
    var(--shadow-sm);

  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}


button:not([class]):hover {

  background:
    var(--color-primary-dark);

  transform:
    translateY(-2px);

  box-shadow:
    var(--shadow-md);
}


/* =========================================
   BUTTON GROUP
========================================= */

.btn-group {

  display: flex;

  flex-wrap: wrap;

  gap:
    var(--space-4);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

  .btn {

    width: 100%;
  }

  .btn-group {

    flex-direction: column;
  }
}