/* Minimal modern buttons with kas- prefix */
:root {
  --kas-btn-radius: 6px;
  --kas-btn-font: 14px;
  --kas-btn-padding-y: 8px;
  --kas-btn-padding-x: 14px;
  --kas-btn-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.kas-button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--kas-btn-font);
  line-height: 1.2;
  padding: var(--kas-btn-padding-y) var(--kas-btn-padding-x);
  border-radius: var(--kas-btn-radius);
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  box-shadow: var(--kas-btn-shadow);
  background-image: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.02s ease, filter 0.08s ease;
}

/* Disabled */
.kas-button:disabled,
.kas-button.kas-button-disabled,
.kas-button.kas-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Sizes */
.kas-button-small { 
  font-size: 12px; 
  padding: 6px 10px; 
  border-radius: 5px; 
}
.kas-button-medium { 
  font-size: 14px; 
  padding: 8px 14px; 
  border-radius: 6px; 
}
.kas-button-large { 
  font-size: 16px; 
  padding: 10px 18px; 
  border-radius: 7px; 
}

/* ============================ */
/* Solid Variants */
.kas-button-primary,
.kas-button-primary:hover {
  background-color: #4d89f9; 
  border-color: #4d89f9; 
  color: #fff;
}
.kas-button-primary:active { 
  background-color: #3466cc; 
  border-color: #3466cc; 
  color: #fff; 
}

.kas-button-secondary,
.kas-button-secondary:hover {
  background-color: #6c757d; 
  border-color: #6c757d; 
  color: #fff;
}
.kas-button-secondary:active { 
  background-color: #4e555b; 
  border-color: #4e555b; 
  color: #fff; 
}

.kas-button-success,
.kas-button-success:hover {
  background-color: #198754; 
  border-color: #198754; 
  color: #fff;
}
.kas-button-success:active { 
  background-color: #115d3c; 
  border-color: #115d3c; 
  color: #fff; 
}

.kas-button-warning,
.kas-button-warning:hover {
  background-color: #f28b10; 
  border-color: #f28b10; 
  color: #fff;
}
.kas-button-warning:active { 
  background-color: #cf8730; 
  border-color: #cf8730; 
  color: #fff; 
}

.kas-button-alert,
.kas-button-alert:hover {
  background-color: #dc3545; 
  border-color: #dc3545; 
  color: #fff;
}
.kas-button-alert:active { 
  background-color: #bd2130; 
  border-color: #bd2130; 
  color: #fff; 
}

.kas-button-info,
.kas-button-info:hover {
  background-color: #0dcaf0; 
  border-color: #0dcaf0; 
  color: #111;
}
.kas-button-info:active { 
  background-color: #09a5c1; 
  border-color: #09a5c1; 
  color: #111; 
}

.kas-button-light,
.kas-button-light:hover {
  background-color: #e2e6ea; 
  border-color: #d3d9df; 
  color: #111; 
}
.kas-button-light:active { 
  background-color: #cbd3da; 
  border-color: #bfc8d1; 
  color: #111; 
}

.kas-button-dark,
.kas-button-dark:hover { 
  background-color: #212529; 
  border-color: #212529; 
  color: #fff;
}
.kas-button-dark:active { 
  background-color: #14171a; 
  border-color: #14171a; 
  color: #fff; 
}

/* ============================ */
/* Outline Variants */
.kas-button-outline-primary,
.kas-button-outline-primary:hover {
  background-color: transparent; 
  border-color: #4d89f9; 
  color: #4d89f9;
}
.kas-button-outline-primary:active { 
  background-color: rgba(77,137,249,0.2); 
  border-color: #3466cc; 
  color: #3466cc; 
}

.kas-button-outline-secondary,
.kas-button-outline-secondary:hover {
  background-color: transparent; 
  border-color: #6c757d; 
  color: #6c757d;
}
.kas-button-outline-secondary:active { 
  background-color: rgba(108,117,125,0.2); 
  border-color: #4e555b; 
  color: #4e555b; 
}

.kas-button-outline-success,
.kas-button-outline-success:hover {
  background-color: transparent; 
  border-color: #198754; 
  color: #198754;
}
.kas-button-outline-success:active { 
  background-color: rgba(25,135,84,0.2); 
  border-color: #115d3c; 
  color: #115d3c; 
}

.kas-button-outline-warning,
.kas-button-outline-warning:hover {
  background-color: transparent; 
  border-color: #ffc107; 
  color: #856404;
}
.kas-button-outline-warning:active { 
  background-color: rgba(255,193,7,0.2); 
  border-color: #c69500; 
  color: #856404; 
}

.kas-button-outline-alert,
.kas-button-outline-alert:hover {
  background-color: transparent; 
  border-color: #dc3545; 
  color: #dc3545;
}
.kas-button-outline-alert:active { 
  background-color: rgba(220,53,69,0.2); 
  border-color: #bd2130; 
  color: #bd2130; 
}

.kas-button-outline-info,
.kas-button-outline-info:hover {
  background-color: transparent; 
  border-color: #0dcaf0; 
  color: #0dcaf0;
}
.kas-button-outline-info:active { 
  background-color: rgba(13,202,240,0.2); 
  border-color: #09a5c1; 
  color: #09a5c1; 
}

.kas-button-outline-light,
.kas-button-outline-light:hover {
  background-color: transparent; 
  border-color: #e9ecef; 
  color: #111;
}
.kas-button-outline-light:active { 
  background-color: rgba(233,238,239,0.2); 
  border-color: #bfc8d1; 
  color: #111; 
}

.kas-button-outline-dark,
.kas-button-outline-dark:hover {
  background-color: transparent; 
  border-color: #212529; 
  color: #212529;
}
.kas-button-outline-dark:active { 
  background-color: rgba(33,37,41,0.2); 
  border-color: #14171a; 
  color: #14171a; 
}

/* ============================ */
/* Ghost style */
.kas-button-ghost,
.kas-button-ghost:hover {
  background-color: transparent;
  border-color: transparent;
  color: inherit;
  box-shadow: none;
}
.kas-button-ghost:active { 
  background-color: rgba(0,0,0,0.1); 
}