/* =========================
   Base Button
   ========================= */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0; /* default rounded */
  transition: all 0.2s ease-in-out;
  text-align: center;
  text-decoration: none;
}

/* Disabled */
.s-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================
   Size Variants
   ========================= */
.s-btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.s-btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

/* =========================
   Shape Variants
   ========================= */
.s-btn-rounded {
  border-radius: 0.5rem;
}

.s-btn-pill {
  border-radius: 9999px;
}

/* =========================
   Color Variants (using color.css variables)
   ========================= */

/* Red */
.s-btn-red {
  background-color: var(--red-500);
  color: white;
}
.s-btn-red:hover {
  background-color: var(--red-600);
}
.s-btn-red:active {
  background-color: var(--red-700);
}

/* Orange */
.s-btn-orange {
  background-color: var(--orange-500);
  color: white;
}
.s-btn-orange:hover {
  background-color: var(--orange-600);
}
.s-btn-orange:active {
  background-color: var(--orange-700);
}

/* Yellow */
.s-btn-yellow {
  background-color: var(--yellow-400);
  color: black;
}
.s-btn-yellow:hover {
  background-color: var(--yellow-500);
}
.s-btn-yellow:active {
  background-color: var(--yellow-600);
}

/* Green */
.s-btn-green {
  background-color: var(--green-500);
  color: white;
}
.s-btn-green:hover {
  background-color: var(--green-600);
}
.s-btn-green:active {
  background-color: var(--green-700);
}

/* Blue */
.s-btn-blue {
  background-color: var(--blue-500);
  color: white;
}
.s-btn-blue:hover {
  background-color: var(--blue-600);
}
.s-btn-blue:active {
  background-color: var(--blue-700);
}

/* Purple */
.s-btn-purple {
  background-color: var(--purple-500);
  color: white;
}
.s-btn-purple:hover {
  background-color: var(--purple-600);
}
.s-btn-purple:active {
  background-color: var(--purple-700);
}

/* Pink */
.s-btn-pink {
  background-color: var(--pink-500);
  color: white;
}
.s-btn-pink:hover {
  background-color: var(--pink-600);
}
.s-btn-pink:active {
  background-color: var(--pink-700);
}

/* Gray */
.s-btn-gray {
  background-color: var(--gray-500);
  color: white;
}
.s-btn-gray:hover {
  background-color: var(--gray-600);
}
.s-btn-gray:active {
  background-color: var(--gray-700);
}

/* Silver */
.s-btn-silver {
  background-color: var(--silver-400);
  color: black;
}
.s-btn-silver:hover {
  background-color: var(--silver-500);
}
.s-btn-silver:active {
  background-color: var(--silver-600);
}