/* Kyasina Button Styles */

/* Primary Button - Deep Blue */
.tw-btn-primary {
  background-color: #105042; /* tw-bg-brand-blue */
  color: white;
  font-family: 'Inter', system-ui, sans-serif; /* tw-font-body */
  font-weight: 500; /* tw-font-medium */
  padding: 0.5rem 1rem; /* tw-py-2 tw-px-4 */
  border-radius: 0.375rem; /* tw-rounded-md */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* tw-shadow-sm */
  transition: background-color 0.2s;
}

.tw-btn-primary:hover {
  background-color: rgba(16, 80, 66, 0.9); /* hover:tw-bg-brand-blue/90 */
}

.tw-btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #105042; /* focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-brand-blue */
}

/* Secondary Button - Ink Blue */
.tw-btn-secondary {
  background-color: #030040; /* tw-bg-ink-blue */
  color: white;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.tw-btn-secondary:hover {
  background-color: rgba(3, 0, 64, 0.9); /* hover:tw-bg-ink-blue/90 */
}

.tw-btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #030040;
}

/* Accent Button - Yellow (use sparingly, 10% rule) */
.tw-btn-accent {
  background-color: #107538; /* tw-bg-brand-yellow */
  color: #030040; /* tw-text-ink-blue */
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.tw-btn-accent:hover {
  background-color: rgba(16, 117, 56, 0.9); /* hover:tw-bg-brand-yellow/90 */
}

.tw-btn-accent:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #107538;
}

/* Outline Button - Deep Blue */
.tw-btn-outline {
  background-color: transparent;
  border: 1px solid #105042;
  color: #105042;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

.tw-btn-outline:hover {
  background-color: rgba(16, 80, 66, 0.05); /* hover:tw-bg-brand-blue/5 */
}

.tw-btn-outline:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #105042;
}

/* Ghost Button */
.tw-btn-ghost {
  background-color: transparent;
  color: #105042;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

.tw-btn-ghost:hover {
  background-color: rgba(16, 80, 66, 0.05);
}

.tw-btn-ghost:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(16, 80, 66, 0.2);
}

/* Danger Button */
.tw-btn-danger {
  background-color: #dc2626; /* tw-bg-red-600 */
  color: white;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.tw-btn-danger:hover {
  background-color: #b91c1c; /* hover:tw-bg-red-700 */
}

.tw-btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ef4444; /* focus:tw-ring-red-500 */
}

/* Success Button */
.tw-btn-success {
  background-color: #16a34a; /* tw-bg-green-600 */
  color: white;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.tw-btn-success:hover {
  background-color: #15803d; /* hover:tw-bg-green-700 */
}

.tw-btn-success:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #22c55e; /* focus:tw-ring-green-500 */
}

/* Small Button */
.tw-btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

/* Large Button */
.tw-btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

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

/* Disabled Button */
.tw-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Icon Button */
.tw-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon Left */
.tw-btn-icon-left > svg,
.tw-btn-icon-left > i {
  margin-right: 0.5rem;
}

/* Icon Right */
.tw-btn-icon-right > svg,
.tw-btn-icon-right > i {
  margin-left: 0.5rem;
}

/* Rounded Button */
.tw-btn-rounded {
  border-radius: 9999px;
}