.UI-button-primary {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  color: var(--fw-static-black-000);
  background: linear-gradient(90deg, var(--primary-150), var(--primary-250), var(--primary-500));
  background-size: 200%;
  background-position: left;
  border: 1px solid var(--primary-200);
  border-radius: 50px;
  transition: background-position 0.15s ease, color 0.2s ease;
  user-select: none;
}

.UI-button-primary:hover {
  background-position: right;
  color: var(--fw-white-000);
}

.UI-button-primary:disabled {
  background-color: var(--fw-white-250);
  color: var(--fw-black-150);
  border: 1px solid var(--fw-white-450);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}


.UI-button-primary.approve {
  color: var(--fw-white-000);
  background: var(--static-lime-300) !important;
  border: 2px solid var(--static-lime-300) !important;
}

.UI-button-primary.approve:hover {
  background: var(--static-lime-500) !important;
  border: 2px solid var(--static-lime-400) !important;
  color: var(--fw-white-000);
}

.UI-button-primary.approve:disabled {
  background-color: var(--fw-white-250);
  color: var(--fw-black-350);
  border: 1px solid var(--fw-white-450);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

.UI-button-primary.warn {
  color: var(--fw-white-000);
  background: var(--static-red-300) !important;
  border: 2px solid var(--static-red-300) !important;
}

.UI-button-primary.warn:hover {
  background: var(--static-red-500) !important;
  border: 2px solid var(--static-red-400) !important;
  color: var(--fw-white-000);
}

.UI-button-primary.warn:disabled {
  background-color: var(--fw-white-250);
  color: var(--fw-black-350);
  border: 1px solid var(--fw-white-450);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

.UI-button-primary.neutral {
  color: var(--fw-black-000);
  background: var(--fw-white-400) !important;
  border: 2px solid var(--fw-white-400) !important;
}

.UI-button-primary.neutral:hover {
  background: var(--fw-white-450) !important;
  border: 2px solid var(--fw-white-450) !important;
  color: var(--fw-black-000);
}

.UI-button-primary.neutral:disabled {
  background-color: var(--fw-white-250);
  color: var(--fw-black-350);
  border: 1px solid var(--fw-white-450);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

/* /////////////////////////////////////////////////////////////// */

/* Subscription Action Button Styles */

.UI-button-primary.submv2-subscription {
  box-shadow: 0px 1px 0px 0px #00000043;
  position: relative;
  z-index: 3;
  pointer-events: all;
  transition: box-shadow 0.1s ease;
}

.UI-button-primary.submv2-subscription.active {
  background: var(--fw-white-100);
  border: 1px solid var(--fw-white-250);
  color: var(--fw-black-450);
  transition: border 0.1s ease 0s, color 0.2s ease, box-shadow 0.1s ease 0s, background 0.2s ease;
}

.UI-button-primary.submv2-subscription.active .fa-check-circle {
  color: var(--static-lime-400);
}

.UI-button-primary.submv2-subscription.active:hover {
  color: #ff0000;
  background: var(--fw-white-050);
  border: 1px solid #ff0000;
  box-shadow: 0px 0px 0px 0px #00000043;
}

.UI-button-primary.submv2-subscription.active:hover .fa-check-circle {
  color: #ff0000;
}

/* //Cancelled */

.UI-button-primary.submv2-subscription.cancelled {
  background: var(--fw-white-250);
  color: var(--fw-black-500);
  border: 1px solid var(--fw-white-450);
  cursor: not-allowed;
}

.UI-button-primary.submv2-subscription.cancelled .fa-times-circle {
  color: var(--static-red-350);
}

/* //Expired */

.UI-button-primary.submv2-subscription.expired {
  transition: background-position 0.15s ease, color 0.2s ease, box-shadow 0.1s ease;
  box-shadow: 0px 1px 0px 0px #00000043;
}

.UI-button-primary.submv2-subscription.expired:hover {
  box-shadow: 0px 0px 0px 0px #00000043;
  background-position: right;
}

.UI-button-primary.submv2-subscription.expired:hover .fa-times-circle {
  color: var(--fw-white-050);
}

.fa-check-circle,
.fa-times-circle {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

















/* ==============================================================
   UIBTN COLOR SYSTEM (REFACTORED ORDER)
   Base UIBTN -> shared rules -> per-color blocks with simple/non-simple states
   ============================================================== */

/* Shared UIBTN rules */
/* ==============================================================
   UIBTN CORE
   ============================================================== */
.UIBTN {
  --uibtn-bg: var(--fw-white-000);
  --uibtn-border: var(--fw-white-300);
  --uibtn-text: var(--fw-black-300);

  --uibtn-shadow-soft: rgba(0, 0, 0, 0.12);
  --uibtn-shadow-ring: rgba(60, 66, 87, 0.2);
  --uibtn-shadow-depth: rgba(60, 66, 87, 0.2);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;

  --uibtn-hover-bg: var(--fw-white-000);
  --uibtn-hover-border: var(--fw-white-450);
  --uibtn-hover-text: var(--fw-black-000);
  --uibtn-hover-shadow-ring: var(--fw-white-450);
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);

  --uibtn-active-bg: var(--fw-white-050);
  --uibtn-active-border: var(--fw-white-500);
  --uibtn-active-text: var(--fw-black-000);

  --uibtn-disabled-text: var(--fw-black-500);
  --uibtn-disabled-bg: var(--uibtn-bg);
  --uibtn-disabled-border: var(--uibtn-border);
  --uibtn-disabled-hover-text: var(--uibtn-disabled-text);
  --uibtn-disabled-shadow: var(--uibtn-shadow);
  --uibtn-disabled-opacity: 0.75;

  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.14);
  --uibtn-active-shadow-ring: var(--fw-white-500);
  --uibtn-active-shadow-depth: rgba(60, 66, 87, 0.12);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;

  background: var(--fw-white-000);
  box-shadow: var(--uibtn-shadow);
  color: var(--uibtn-text);
  border: 1px solid var(--uibtn-border);
  border-radius: 400px;
  padding: 8px 12px;
  min-height: 30px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  gap: 7px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: "Albert Sans", sans-serif;
  font-size: 0.7rem;
  line-height: 0.9rem;
  letter-spacing: 0.5px;
  text-align: center;
  width: fit-content;
  cursor: pointer;
  pointer-events: all;
  user-select: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* Optional width override for any UIBTN variant */
.UIBTN.UIBTN--full-width {
  width: 100%;
}

.UIBTN:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN:disabled {
  background: var(--uibtn-disabled-bg);
  color: var(--uibtn-disabled-text);
  border: 1px solid var(--uibtn-disabled-border);
  box-shadow: var(--uibtn-disabled-shadow);
  cursor: not-allowed !important;
  opacity: var(--uibtn-disabled-opacity);
  filter: saturate(0.90);
}

/* Non-simple variants: hue-matched darker ring for resting + hover */
.UIBTN[class*="UI-"]:not(.UI-simple):not(:disabled) {
  --uibtn-shadow-ring: var(--uibtn-active-border);
  /* --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px; */
  --uibtn-hover-shadow-ring: var(--uibtn-active-border);
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
}

/* Simple variants: normalize shadow weight/spread and keep per-color hue */
.UIBTN[class*="UI-"].UI-simple:not(:disabled) {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.12);
  --uibtn-shadow-depth: rgba(60, 66, 87, 0.2);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

/* UI-SUBMIT (yellow when enabled, base disabled behavior) */
.UIBTN.UI-submit:not(:disabled) {
  --uibtn-bg: var(--color-yellow-500);
  --uibtn-border: var(--color-yellow-500);
  --uibtn-text: var(--color-yellow-950);
  --uibtn-shadow-soft: rgba(77, 63, 8, 0.18);
  --uibtn-shadow-hi: rgba(255, 243, 174, 0.32);
  --uibtn-shadow-lo: rgba(77, 63, 8, 0.46);
  --uibtn-shadow-ring: var(--color-yellow-500);
  --uibtn-shadow-depth: rgba(77, 63, 8, 0.34);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-yellow-400);
  --uibtn-hover-border: var(--color-yellow-400);
  --uibtn-hover-text: var(--color-yellow-950);
  --uibtn-hover-shadow-ring: var(--color-yellow-800);
  --uibtn-active-bg: var(--color-yellow-600);
  --uibtn-active-border: var(--color-yellow-600);
  --uibtn-active-text: var(--color-yellow-800);
  --uibtn-active-shadow-soft: rgba(77, 63, 8, 0.2);
  --uibtn-active-shadow-hi: rgba(255, 243, 174, 0.28);
  --uibtn-active-shadow-lo: rgba(77, 63, 8, 0.44);
  --uibtn-active-shadow-ring: var(--color-yellow-600);
  --uibtn-active-shadow-depth: rgba(77, 63, 8, 0.3);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  color: var(--uibtn-text);
  border: 1px solid var(--uibtn-border);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-submit:not(:disabled):hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  border: 1px solid var(--uibtn-hover-border);
  box-shadow: var(--uibtn-hover-shadow);
}

.UIBTN.UI-submit:active:not(:disabled),
.UIBTN.UI-submit.is-pressed,
.UIBTN.UI-submit[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
}

/* ROSE */
/* ==============================================================
   UIBTN FILLED VARIANTS (base + hover + active + disabled)
   ============================================================== */
.UIBTN.UI-rose {
  --uibtn-bg: var(--color-rose-500);
  --uibtn-border: var(--color-rose-500);
  --uibtn-text: var(--color-rose-950);
  --uibtn-shadow-soft: rgba(74, 8, 14, 0.18);
  --uibtn-shadow-hi: rgba(255, 210, 214, 0.42);
  --uibtn-shadow-lo: rgba(75, 9, 15, 0.42);
  --uibtn-shadow-ring: var(--color-rose-500);
  --uibtn-shadow-depth: rgba(74, 8, 14, 0.32);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-rose-400);
  --uibtn-hover-border: var(--color-rose-400);
  --uibtn-hover-text: var(--fw-static-white-000);
  --uibtn-hover-shadow-hi: rgba(255, 226, 229, 0.5);
  --uibtn-hover-shadow-lo: rgba(75, 9, 15, 0.5);
  --uibtn-hover-shadow-ring: var(--color-rose-800);
  --uibtn-hover-shadow-depth: rgba(74, 8, 14, 0.42);
  --uibtn-active-bg: var(--color-rose-600);
  --uibtn-active-border: var(--color-rose-600);
  --uibtn-active-text: var(--color-rose-950);
  --uibtn-active-shadow-soft: rgba(74, 8, 14, 0.2);
  --uibtn-active-shadow-hi: rgba(255, 226, 229, 0.36);
  --uibtn-active-shadow-lo: rgba(75, 9, 15, 0.4);
  --uibtn-active-shadow-ring: var(--color-rose-600);
  --uibtn-active-shadow-depth: rgba(74, 8, 14, 0.3);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-rose-600);
  --uibtn-disabled-border: var(--color-rose-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-rose:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-rose.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-rose[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-rose:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-shadow-soft: rgba(74, 8, 14, 0.22);
  --uibtn-shadow-hi: rgba(255, 194, 200, 0.28);
  --uibtn-shadow-lo: rgba(75, 9, 15, 0.5);
  --uibtn-shadow-ring: var(--color-rose-600);
  --uibtn-shadow-depth: rgba(74, 8, 14, 0.38);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-rose:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-rose.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-rose-700);
  --uibtn-bg: var(--color-rose-950);
  --uibtn-border: var(--color-rose-700);
  --uibtn-text: var(--color-rose-400);
  --uibtn-hover-bg: var(--color-rose-500);
  --uibtn-hover-border: var(--color-rose-500);
  --uibtn-hover-text: var(--color-rose-100);
  --uibtn-active-bg: var(--color-rose-600);
  --uibtn-active-border: var(--color-rose-600);
  --uibtn-active-text: var(--color-rose-800);
  --uibtn-disabled-bg: var(--color-rose-400);
  --uibtn-disabled-border: var(--color-rose-600);
  --uibtn-disabled-text: var(--color-rose-800);
  --uibtn-disabled-hover-text: var(--color-rose-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-rose.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* RED */
.UIBTN.UI-red {
  --uibtn-bg: var(--color-red-500);
  --uibtn-border: var(--color-red-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-soft: rgba(52, 5, 10, 0.18);
  --uibtn-shadow-hi: rgba(255, 198, 203, 0.34);
  --uibtn-shadow-lo: rgba(65, 6, 12, 0.48);
  --uibtn-shadow-ring: var(--color-red-500);
  --uibtn-shadow-depth: rgba(52, 5, 10, 0.36);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-red-400);
  --uibtn-hover-border: var(--color-red-400);
  --uibtn-hover-text: var(--fw-static-black-000);
  --uibtn-hover-shadow-hi: rgba(255, 214, 218, 0.42);
  --uibtn-hover-shadow-lo: rgba(65, 6, 12, 0.56);
  --uibtn-hover-shadow-ring: var(--color-red-800);
  --uibtn-hover-shadow-depth: rgba(52, 5, 10, 0.48);
  --uibtn-active-bg: var(--color-red-600);
  --uibtn-active-border: var(--color-red-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-soft: rgba(52, 5, 10, 0.2);
  --uibtn-active-shadow-hi: rgba(255, 214, 218, 0.32);
  --uibtn-active-shadow-lo: rgba(65, 6, 12, 0.48);
  --uibtn-active-shadow-ring: var(--color-red-600);
  --uibtn-active-shadow-depth: rgba(52, 5, 10, 0.34);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-red-600);
  --uibtn-disabled-border: var(--color-red-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-red:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-red.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-red[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-red:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-shadow-soft: rgba(52, 5, 10, 0.24);
  --uibtn-shadow-hi: rgba(255, 187, 194, 0.24);
  --uibtn-shadow-lo: rgba(65, 6, 12, 0.56);
  --uibtn-shadow-ring: var(--color-red-600);
  --uibtn-shadow-depth: rgba(52, 5, 10, 0.42);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-red:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-red.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-red-700);
  --uibtn-bg: var(--color-red-950);
  --uibtn-border: var(--color-red-700);
  --uibtn-text: var(--color-red-400);
  --uibtn-hover-bg: var(--color-red-500);
  --uibtn-hover-border: var(--color-red-500);
  --uibtn-hover-text: var(--color-red-100);
  --uibtn-active-bg: var(--color-red-600);
  --uibtn-active-border: var(--color-red-600);
  --uibtn-active-text: var(--color-red-800);
  --uibtn-disabled-bg: var(--color-red-400);
  --uibtn-disabled-border: var(--color-red-600);
  --uibtn-disabled-text: var(--color-red-800);
  --uibtn-disabled-hover-text: var(--color-red-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-red.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* ORANGE */
.UIBTN.UI-orange {
  --uibtn-bg: var(--color-orange-500);
  --uibtn-border: var(--color-orange-500);
  --uibtn-text: var(--color-orange-950);
  --uibtn-shadow-ring: var(--color-orange-500);
  --uibtn-hover-bg: var(--color-orange-400);
  --uibtn-hover-border: var(--color-orange-400);
  --uibtn-hover-text: var(--fw-static-black-000);
  --uibtn-active-bg: var(--color-orange-600);
  --uibtn-active-border: var(--color-orange-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-ring: var(--color-orange-600);
  --uibtn-disabled-bg: var(--color-orange-600);
  --uibtn-disabled-border: var(--color-orange-600);
  --uibtn-disabled-text: var(--fw-black-000);
  /* Additional missing color variants (normal + simple) */
}

.UIBTN.UI-orange {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-orange:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-orange.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-orange[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-orange:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
}

.UIBTN.UI-orange:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-orange.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-orange-800);
  --uibtn-bg: var(--color-orange-950);
  --uibtn-border: var(--color-orange-700);
  --uibtn-text: var(--color-orange-400);
  --uibtn-hover-bg: var(--color-orange-500);
  --uibtn-hover-border: var(--color-orange-500);
  --uibtn-hover-text: var(--color-orange-100);
  --uibtn-active-bg: var(--color-orange-600);
  --uibtn-active-border: var(--color-orange-600);
  --uibtn-active-text: var(--color-orange-800);
  --uibtn-disabled-bg: var(--color-orange-400);
  --uibtn-disabled-border: var(--color-orange-600);
  --uibtn-disabled-text: var(--color-orange-800);
  --uibtn-disabled-hover-text: var(--color-orange-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-orange.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* AMBER */
.UIBTN.UI-amber {
  --uibtn-bg: var(--color-amber-500);
  --uibtn-border: var(--color-amber-500);
  --uibtn-text: var(--color-amber-950);
  --uibtn-shadow-soft: rgba(79, 57, 7, 0.18);
  --uibtn-shadow-hi: rgba(255, 232, 184, 0.34);
  --uibtn-shadow-lo: rgba(79, 57, 7, 0.44);
  --uibtn-shadow-ring: var(--color-amber-500);
  --uibtn-shadow-depth: rgba(79, 57, 7, 0.32);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-amber-400);
  --uibtn-hover-border: var(--color-amber-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-active-bg: var(--color-amber-600);
  --uibtn-active-border: var(--color-amber-600);
  --uibtn-active-text: var(--color-amber-950);
  --uibtn-active-shadow-soft: rgba(79, 57, 7, 0.22);
  --uibtn-active-shadow-ring: var(--color-amber-600);
  --uibtn-active-shadow-depth: rgba(79, 57, 7, 0.38);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-amber-600);
  --uibtn-disabled-border: var(--color-amber-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-amber:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-amber.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-amber[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-amber:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-amber-950);
  --uibtn-shadow-soft: rgba(79, 57, 7, 0.24);
  --uibtn-shadow-hi: rgba(255, 220, 162, 0.24);
  --uibtn-shadow-lo: rgba(79, 57, 7, 0.52);
  --uibtn-shadow-ring: var(--color-amber-600);
  --uibtn-shadow-depth: rgba(79, 57, 7, 0.4);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-amber:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-amber.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-amber-800);
  --uibtn-bg: var(--color-amber-950);
  --uibtn-border: var(--color-amber-700);
  --uibtn-text: var(--color-amber-400);
  --uibtn-hover-bg: var(--color-amber-500);
  --uibtn-hover-border: var(--color-amber-500);
  --uibtn-hover-text: var(--color-amber-100);
  --uibtn-active-bg: var(--color-amber-600);
  --uibtn-active-border: var(--color-amber-600);
  --uibtn-active-text: var(--color-amber-800);
  --uibtn-disabled-bg: var(--color-amber-400);
  --uibtn-disabled-border: var(--color-amber-600);
  --uibtn-disabled-text: var(--color-amber-800);
  --uibtn-disabled-hover-text: var(--color-amber-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-amber.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* YELLOW */
.UIBTN.UI-yellow {
  --uibtn-bg: var(--color-yellow-500);
  --uibtn-border: var(--color-yellow-500);
  --uibtn-text: var(--fw-static-black-000);
  --uibtn-shadow-soft: rgba(78, 43, 5, 0.18);
  --uibtn-shadow-hi: rgba(255, 224, 188, 0.34);
  --uibtn-shadow-lo: rgba(78, 43, 5, 0.42);
  --uibtn-shadow-ring: var(--color-yellow-500);
  --uibtn-shadow-depth: rgba(78, 43, 5, 0.3);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-yellow-400);
  --uibtn-hover-border: var(--color-yellow-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-hover-shadow-hi: rgba(255, 234, 204, 0.42);
  --uibtn-hover-shadow-lo: rgba(78, 43, 5, 0.5);
  --uibtn-hover-shadow-ring: var(--color-amber-400);
  --uibtn-hover-shadow-depth: rgba(78, 43, 5, 0.4);
  --uibtn-active-bg: var(--color-amber-600);
  --uibtn-active-border: var(--color-amber-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-soft: rgba(78, 43, 5, 0.2);
  --uibtn-active-shadow-hi: rgba(255, 234, 204, 0.32);
  --uibtn-active-shadow-lo: rgba(78, 43, 5, 0.42);
  --uibtn-active-shadow-ring: var(--color-amber-600);
  --uibtn-active-shadow-depth: rgba(78, 43, 5, 0.3);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-yellow-600);
  --uibtn-disabled-border: var(--color-yellow-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-yellow:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-yellow.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-yellow[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-yellow:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-shadow-soft: rgba(78, 43, 5, 0.24);
  --uibtn-shadow-hi: rgba(255, 209, 166, 0.24);
  --uibtn-shadow-lo: rgba(78, 43, 5, 0.52);
  --uibtn-shadow-ring: var(--color-amber-600);
  --uibtn-shadow-depth: rgba(78, 43, 5, 0.38);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-yellow:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-yellow.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-yellow-800);
  --uibtn-bg: var(--color-yellow-950);
  --uibtn-border: var(--color-yellow-700);
  --uibtn-text: var(--color-yellow-300);
  --uibtn-hover-bg: var(--color-yellow-500);
  --uibtn-hover-border: var(--color-yellow-500);
  --uibtn-hover-text: var(--color-yellow-100);
  --uibtn-active-bg: var(--color-yellow-600);
  --uibtn-active-border: var(--color-yellow-600);
  --uibtn-active-text: var(--color-yellow-800);
  --uibtn-disabled-bg: var(--color-yellow-400);
  --uibtn-disabled-border: var(--color-yellow-600);
  --uibtn-disabled-text: var(--color-yellow-800);
  --uibtn-disabled-hover-text: var(--color-yellow-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-yellow.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* LIME */
.UIBTN.UI-lime {
  --uibtn-bg: var(--color-lime-500);
  --uibtn-border: var(--color-lime-500);
  --uibtn-text: var(--color-lime-950);
  --uibtn-shadow-soft: rgba(8, 62, 41, 0.18);
  --uibtn-shadow-hi: rgba(202, 247, 224, 0.32);
  --uibtn-shadow-lo: rgba(8, 62, 41, 0.44);
  --uibtn-shadow-ring: var(--color-lime-500);
  --uibtn-shadow-depth: rgba(8, 62, 41, 0.32);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-lime-400);
  --uibtn-hover-border: var(--color-lime-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-hover-shadow-hi: rgba(220, 252, 235, 0.42);
  --uibtn-hover-shadow-lo: rgba(8, 62, 41, 0.52);
  --uibtn-hover-shadow-ring: var(--color-lime-500);
  --uibtn-hover-shadow-depth: rgba(8, 62, 41, 0.42);
  --uibtn-active-bg: var(--color-lime-600);
  --uibtn-active-border: var(--color-lime-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-soft: rgba(8, 62, 41, 0.2);
  --uibtn-active-shadow-hi: rgba(220, 252, 235, 0.32);
  --uibtn-active-shadow-lo: rgba(8, 62, 41, 0.44);
  --uibtn-active-shadow-ring: var(--color-lime-600);
  --uibtn-active-shadow-depth: rgba(8, 62, 41, 0.32);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-lime-600);
  --uibtn-disabled-border: var(--color-lime-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-lime:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-lime.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-lime[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-lime:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-shadow-soft: rgba(8, 62, 41, 0.24);
  --uibtn-shadow-hi: rgba(184, 238, 208, 0.24);
  --uibtn-shadow-lo: rgba(8, 62, 41, 0.52);
  --uibtn-shadow-ring: var(--color-lime-600);
  --uibtn-shadow-depth: rgba(8, 62, 41, 0.4);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-lime:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-lime.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-lime-700);
  --uibtn-bg: var(--color-lime-950);
  --uibtn-border: var(--color-lime-700);
  --uibtn-text: var(--color-lime-400);
  --uibtn-hover-bg: var(--color-lime-500);
  --uibtn-hover-border: var(--color-lime-500);
  --uibtn-hover-text: var(--color-lime-100);
  --uibtn-active-bg: var(--color-lime-600);
  --uibtn-active-border: var(--color-lime-600);
  --uibtn-active-text: var(--color-lime-800);
  --uibtn-disabled-bg: var(--color-lime-400);
  --uibtn-disabled-border: var(--color-lime-600);
  --uibtn-disabled-text: var(--color-lime-800);
  --uibtn-disabled-hover-text: var(--color-lime-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-lime.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* GREEN */
.UIBTN.UI-green {
  --uibtn-bg: var(--color-green-500);
  --uibtn-border: var(--color-green-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-green-500);
  --uibtn-hover-bg: var(--color-green-400);
  --uibtn-hover-border: var(--color-green-400);
  --uibtn-hover-text: var(--color-green-950);
  --uibtn-active-bg: var(--color-green-600);
  --uibtn-active-border: var(--color-green-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-ring: var(--color-green-600);
  --uibtn-disabled-bg: var(--color-green-600);
  --uibtn-disabled-border: var(--color-green-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-green {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-green:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-green.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-green[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-green:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
}

.UIBTN.UI-green:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-green.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-green-800);
  --uibtn-bg: var(--color-green-950);
  --uibtn-border: var(--color-green-700);
  --uibtn-text: var(--color-green-400);
  --uibtn-hover-bg: var(--color-green-500);
  --uibtn-hover-border: var(--color-green-500);
  --uibtn-hover-text: var(--color-green-100);
  --uibtn-active-bg: var(--color-green-600);
  --uibtn-active-border: var(--color-green-600);
  --uibtn-active-text: var(--color-green-800);
  --uibtn-disabled-bg: var(--color-green-400);
  --uibtn-disabled-border: var(--color-green-600);
  --uibtn-disabled-text: var(--color-green-800);
  --uibtn-disabled-hover-text: var(--color-green-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-green.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* EMERALD */
.UIBTN.UI-emerald {
  --uibtn-bg: var(--color-emerald-500);
  --uibtn-border: var(--color-emerald-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-emerald-500);
  --uibtn-hover-bg: var(--color-emerald-400);
  --uibtn-hover-border: var(--color-emerald-400);
  --uibtn-hover-text: var(--color-emerald-950);
  --uibtn-active-bg: var(--color-emerald-600);
  --uibtn-active-border: var(--color-emerald-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-ring: var(--color-emerald-600);
  --uibtn-disabled-bg: var(--color-emerald-600);
  --uibtn-disabled-border: var(--color-emerald-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-emerald {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-emerald:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-emerald.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-emerald[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-emerald:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
}

.UIBTN.UI-emerald:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-emerald.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-emerald-800);
  --uibtn-bg: var(--color-emerald-950);
  --uibtn-border: var(--color-emerald-700);
  --uibtn-text: var(--color-emerald-400);
  --uibtn-hover-bg: var(--color-emerald-500);
  --uibtn-hover-border: var(--color-emerald-500);
  --uibtn-hover-text: var(--color-emerald-100);
  --uibtn-active-bg: var(--color-emerald-600);
  --uibtn-active-border: var(--color-emerald-600);
  --uibtn-active-text: var(--color-emerald-800);
  --uibtn-disabled-bg: var(--color-emerald-400);
  --uibtn-disabled-border: var(--color-emerald-600);
  --uibtn-disabled-text: var(--color-emerald-800);
  --uibtn-disabled-hover-text: var(--color-emerald-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-emerald.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* TEAL */
.UIBTN.UI-teal {
  --uibtn-bg: var(--color-teal-500);
  --uibtn-border: var(--color-teal-500);
  --uibtn-text: var(--color-teal-950);
  --uibtn-shadow-soft: rgba(7, 61, 63, 0.18);
  --uibtn-shadow-hi: rgba(188, 243, 241, 0.3);
  --uibtn-shadow-lo: rgba(7, 61, 63, 0.46);
  --uibtn-shadow-ring: var(--color-teal-500);
  --uibtn-shadow-depth: rgba(7, 61, 63, 0.34);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-teal-400);
  --uibtn-hover-border: var(--color-teal-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-active-bg: var(--color-teal-600);
  --uibtn-active-border: var(--color-teal-600);
  --uibtn-active-text: var(--color-teal-950);
  --uibtn-active-shadow-soft: rgba(7, 61, 63, 0.22);
  --uibtn-active-shadow-ring: var(--color-teal-600);
  --uibtn-active-shadow-depth: rgba(7, 61, 63, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-teal-600);
  --uibtn-disabled-border: var(--color-teal-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-teal:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-teal.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-teal[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-teal:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-teal-950);
  --uibtn-shadow-soft: rgba(7, 61, 63, 0.24);
  --uibtn-shadow-hi: rgba(172, 228, 225, 0.22);
  --uibtn-shadow-lo: rgba(7, 61, 63, 0.54);
  --uibtn-shadow-ring: var(--color-teal-600);
  --uibtn-shadow-depth: rgba(7, 61, 63, 0.42);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-teal:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-teal.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-teal-800);
  --uibtn-bg: var(--color-teal-950);
  --uibtn-border: var(--color-teal-700);
  --uibtn-text: var(--color-teal-400);
  --uibtn-hover-bg: var(--color-teal-500);
  --uibtn-hover-border: var(--color-teal-500);
  --uibtn-hover-text: var(--color-teal-100);
  --uibtn-active-bg: var(--color-teal-600);
  --uibtn-active-border: var(--color-teal-600);
  --uibtn-active-text: var(--color-teal-800);
  --uibtn-disabled-bg: var(--color-teal-400);
  --uibtn-disabled-border: var(--color-teal-600);
  --uibtn-disabled-text: var(--color-teal-800);
  --uibtn-disabled-hover-text: var(--color-teal-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-teal.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* CYAN */
.UIBTN.UI-cyan {
  --uibtn-bg: var(--color-cyan-500);
  --uibtn-border: var(--color-cyan-500);
  --uibtn-text: var(--color-cyan-950);
  --uibtn-shadow-soft: rgba(7, 36, 79, 0.18);
  --uibtn-shadow-hi: rgba(198, 227, 255, 0.32);
  --uibtn-shadow-lo: rgba(7, 36, 79, 0.45);
  --uibtn-shadow-ring: var(--color-cyan-500);
  --uibtn-shadow-depth: rgba(7, 36, 79, 0.32);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-cyan-400);
  --uibtn-hover-border: var(--color-cyan-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-hover-shadow-hi: rgba(215, 236, 255, 0.42);
  --uibtn-hover-shadow-lo: rgba(7, 36, 79, 0.54);
  --uibtn-hover-shadow-ring: var(--color-cyan-400);
  --uibtn-hover-shadow-depth: rgba(7, 36, 79, 0.44);
  --uibtn-active-bg: var(--color-cyan-600);
  --uibtn-active-border: var(--color-cyan-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-soft: rgba(7, 36, 79, 0.2);
  --uibtn-active-shadow-hi: rgba(215, 236, 255, 0.32);
  --uibtn-active-shadow-lo: rgba(7, 36, 79, 0.45);
  --uibtn-active-shadow-ring: var(--color-cyan-600);
  --uibtn-active-shadow-depth: rgba(7, 36, 79, 0.32);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-cyan-600);
  --uibtn-disabled-border: var(--color-cyan-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-cyan:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-cyan.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-cyan[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-cyan:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-shadow-soft: rgba(7, 36, 79, 0.24);
  --uibtn-shadow-hi: rgba(178, 214, 248, 0.24);
  --uibtn-shadow-lo: rgba(7, 36, 79, 0.52);
  --uibtn-shadow-ring: var(--color-cyan-600);
  --uibtn-shadow-depth: rgba(7, 36, 79, 0.4);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-cyan:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-cyan.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-cyan-800);
  --uibtn-bg: var(--color-cyan-950);
  --uibtn-border: var(--color-cyan-700);
  --uibtn-text: var(--color-cyan-400);
  --uibtn-hover-bg: var(--color-cyan-500);
  --uibtn-hover-border: var(--color-cyan-500);
  --uibtn-hover-text: var(--color-cyan-100);
  --uibtn-active-bg: var(--color-cyan-600);
  --uibtn-active-border: var(--color-cyan-600);
  --uibtn-active-text: var(--color-cyan-800);
  --uibtn-disabled-bg: var(--color-cyan-400);
  --uibtn-disabled-border: var(--color-cyan-600);
  --uibtn-disabled-text: var(--color-cyan-800);
  --uibtn-disabled-hover-text: var(--color-cyan-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-cyan.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* SKY */
.UIBTN.UI-sky {
  --uibtn-bg: var(--color-sky-500);
  --uibtn-border: var(--color-sky-500);
  --uibtn-text: var(--color-sky-950);
  --uibtn-shadow-soft: rgba(7, 42, 86, 0.18);
  --uibtn-shadow-hi: rgba(195, 228, 255, 0.32);
  --uibtn-shadow-lo: rgba(7, 42, 86, 0.46);
  --uibtn-shadow-ring: var(--color-sky-500);
  --uibtn-shadow-depth: rgba(7, 42, 86, 0.34);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-sky-400);
  --uibtn-hover-border: var(--color-sky-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-active-bg: var(--color-sky-600);
  --uibtn-active-border: var(--color-sky-600);
  --uibtn-active-text: var(--color-sky-950);
  --uibtn-active-shadow-soft: rgba(7, 42, 86, 0.22);
  --uibtn-active-shadow-ring: var(--color-sky-600);
  --uibtn-active-shadow-depth: rgba(7, 42, 86, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-sky-600);
  --uibtn-disabled-border: var(--color-sky-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-sky:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-sky.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-sky[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-sky:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-sky-950);
  --uibtn-shadow-soft: rgba(7, 42, 86, 0.24);
  --uibtn-shadow-hi: rgba(177, 212, 243, 0.22);
  --uibtn-shadow-lo: rgba(7, 42, 86, 0.54);
  --uibtn-shadow-ring: var(--color-sky-600);
  --uibtn-shadow-depth: rgba(7, 42, 86, 0.42);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-sky:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-sky.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-sky-800);
  --uibtn-bg: var(--color-sky-950);
  --uibtn-border: var(--color-sky-700);
  --uibtn-text: var(--color-sky-400);
  --uibtn-hover-bg: var(--color-sky-500);
  --uibtn-hover-border: var(--color-sky-500);
  --uibtn-hover-text: var(--color-sky-100);
  --uibtn-active-bg: var(--color-sky-600);
  --uibtn-active-border: var(--color-sky-600);
  --uibtn-active-text: var(--color-sky-800);
  --uibtn-disabled-bg: var(--color-sky-400);
  --uibtn-disabled-border: var(--color-sky-600);
  --uibtn-disabled-text: var(--color-sky-800);
  --uibtn-disabled-hover-text: var(--color-sky-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-sky.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* BLUE */
.UIBTN.UI-blue {
  --uibtn-bg: var(--color-blue-500);
  --uibtn-border: var(--color-blue-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-blue-500);
  --uibtn-hover-bg: var(--color-blue-400);
  --uibtn-hover-border: var(--color-blue-400);
  --uibtn-hover-text: var(--color-blue-950);
  --uibtn-active-bg: var(--color-blue-600);
  --uibtn-active-border: var(--color-blue-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-ring: var(--color-blue-600);
  --uibtn-disabled-bg: var(--color-blue-600);
  --uibtn-disabled-border: var(--color-blue-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-blue {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-blue:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-blue.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-blue[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-blue:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
}

.UIBTN.UI-blue:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-blue.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-blue-700);
  --uibtn-bg: var(--color-blue-950);
  --uibtn-border: var(--color-blue-700);
  --uibtn-text: var(--color-blue-400);
  --uibtn-hover-bg: var(--color-blue-500);
  --uibtn-hover-border: var(--color-blue-500);
  --uibtn-hover-text: var(--color-blue-100);
  --uibtn-active-bg: var(--color-blue-600);
  --uibtn-active-border: var(--color-blue-600);
  --uibtn-active-text: var(--color-blue-800);
  --uibtn-disabled-bg: var(--color-blue-400);
  --uibtn-disabled-border: var(--color-blue-600);
  --uibtn-disabled-text: var(--color-blue-800);
  --uibtn-disabled-hover-text: var(--color-blue-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-blue.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* INDIGO */
.UIBTN.UI-indigo {
  --uibtn-bg: var(--color-indigo-500);
  --uibtn-border: var(--color-indigo-500);
  --uibtn-text: var(--color-indigo-950);
  --uibtn-shadow-soft: rgba(30, 18, 95, 0.18);
  --uibtn-shadow-hi: rgba(219, 208, 255, 0.3);
  --uibtn-shadow-lo: rgba(30, 18, 95, 0.48);
  --uibtn-shadow-ring: var(--color-indigo-500);
  --uibtn-shadow-depth: rgba(30, 18, 95, 0.36);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-indigo-400);
  --uibtn-hover-border: var(--color-indigo-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-active-bg: var(--color-indigo-600);
  --uibtn-active-border: var(--color-indigo-600);
  --uibtn-active-text: var(--color-indigo-950);
  --uibtn-active-shadow-soft: rgba(30, 18, 95, 0.22);
  --uibtn-active-shadow-ring: var(--color-indigo-600);
  --uibtn-active-shadow-depth: rgba(30, 18, 95, 0.42);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-indigo-600);
  --uibtn-disabled-border: var(--color-indigo-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-indigo:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-indigo.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-indigo[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-indigo:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-indigo-950);
  --uibtn-shadow-soft: rgba(30, 18, 95, 0.24);
  --uibtn-shadow-hi: rgba(201, 191, 240, 0.22);
  --uibtn-shadow-lo: rgba(30, 18, 95, 0.56);
  --uibtn-shadow-ring: var(--color-indigo-600);
  --uibtn-shadow-depth: rgba(30, 18, 95, 0.44);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-indigo:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-indigo.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-indigo-800);
  --uibtn-bg: var(--color-indigo-950);
  --uibtn-border: var(--color-indigo-700);
  --uibtn-text: var(--color-indigo-400);
  --uibtn-hover-bg: var(--color-indigo-500);
  --uibtn-hover-border: var(--color-indigo-500);
  --uibtn-hover-text: var(--color-indigo-100);
  --uibtn-active-bg: var(--color-indigo-600);
  --uibtn-active-border: var(--color-indigo-600);
  --uibtn-active-text: var(--color-indigo-800);
  --uibtn-disabled-bg: var(--color-indigo-400);
  --uibtn-disabled-border: var(--color-indigo-600);
  --uibtn-disabled-text: var(--color-indigo-800);
  --uibtn-disabled-hover-text: var(--color-indigo-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-indigo.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* VIOLET */
.UIBTN.UI-violet {
  --uibtn-bg: var(--color-violet-500);
  --uibtn-border: var(--color-violet-500);
  --uibtn-text: var(--color-violet-950);
  --uibtn-shadow-soft: rgba(52, 13, 101, 0.18);
  --uibtn-shadow-hi: rgba(234, 207, 255, 0.3);
  --uibtn-shadow-lo: rgba(52, 13, 101, 0.5);
  --uibtn-shadow-ring: var(--color-violet-500);
  --uibtn-shadow-depth: rgba(52, 13, 101, 0.38);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-violet-400);
  --uibtn-hover-border: var(--color-violet-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-active-bg: var(--color-violet-600);
  --uibtn-active-border: var(--color-violet-600);
  --uibtn-active-text: var(--color-violet-950);
  --uibtn-active-shadow-soft: rgba(52, 13, 101, 0.22);
  --uibtn-active-shadow-ring: var(--color-violet-600);
  --uibtn-active-shadow-depth: rgba(52, 13, 101, 0.44);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-violet-600);
  --uibtn-disabled-border: var(--color-violet-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-violet:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-violet.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-violet[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-violet:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-violet-950);
  --uibtn-shadow-soft: rgba(52, 13, 101, 0.24);
  --uibtn-shadow-hi: rgba(217, 192, 245, 0.22);
  --uibtn-shadow-lo: rgba(52, 13, 101, 0.56);
  --uibtn-shadow-ring: var(--color-violet-600);
  --uibtn-shadow-depth: rgba(52, 13, 101, 0.46);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-violet:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-violet.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-violet-800);
  --uibtn-bg: var(--color-violet-950);
  --uibtn-border: var(--color-violet-700);
  --uibtn-text: var(--color-violet-400);
  --uibtn-hover-bg: var(--color-violet-500);
  --uibtn-hover-border: var(--color-violet-500);
  --uibtn-hover-text: var(--color-violet-100);
  --uibtn-active-bg: var(--color-violet-600);
  --uibtn-active-border: var(--color-violet-600);
  --uibtn-active-text: var(--color-violet-800);
  --uibtn-disabled-bg: var(--color-violet-400);
  --uibtn-disabled-border: var(--color-violet-600);
  --uibtn-disabled-text: var(--color-violet-800);
  --uibtn-disabled-hover-text: var(--color-violet-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-violet.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* PURPLE */
.UIBTN.UI-purple {
  --uibtn-bg: var(--color-purple-500);
  --uibtn-border: var(--color-purple-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-purple-500);
  --uibtn-hover-bg: var(--color-purple-400);
  --uibtn-hover-border: var(--color-purple-400);
  --uibtn-hover-text: var(--color-purple-950);
  --uibtn-active-bg: var(--color-purple-600);
  --uibtn-active-border: var(--color-purple-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-ring: var(--color-purple-600);
  --uibtn-disabled-bg: var(--color-purple-600);
  --uibtn-disabled-border: var(--color-purple-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-purple {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-purple:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-purple.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-purple[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-purple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
}

.UIBTN.UI-purple:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-purple.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-purple-800);
  --uibtn-bg: var(--color-purple-950);
  --uibtn-border: var(--color-purple-700);
  --uibtn-text: var(--color-purple-400);
  --uibtn-hover-bg: var(--color-purple-500);
  --uibtn-hover-border: var(--color-purple-500);
  --uibtn-hover-text: var(--color-purple-100);
  --uibtn-active-bg: var(--color-purple-600);
  --uibtn-active-border: var(--color-purple-600);
  --uibtn-active-text: var(--color-purple-800);
  --uibtn-disabled-bg: var(--color-purple-400);
  --uibtn-disabled-border: var(--color-purple-600);
  --uibtn-disabled-text: var(--color-purple-800);
  --uibtn-disabled-hover-text: var(--color-purple-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-purple.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* FUCHSIA */
.UIBTN.UI-fuchsia {
  --uibtn-bg: var(--color-fuchsia-500);
  --uibtn-border: var(--color-fuchsia-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-fuchsia-500);
  --uibtn-hover-bg: var(--color-fuchsia-400);
  --uibtn-hover-border: var(--color-fuchsia-400);
  --uibtn-hover-text: var(--color-fuchsia-950);
  --uibtn-active-bg: var(--color-fuchsia-600);
  --uibtn-active-border: var(--color-fuchsia-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-ring: var(--color-fuchsia-600);
  --uibtn-disabled-bg: var(--color-fuchsia-600);
  --uibtn-disabled-border: var(--color-fuchsia-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-fuchsia {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-fuchsia:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-fuchsia.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-fuchsia[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-fuchsia:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
}

.UIBTN.UI-fuchsia:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-fuchsia.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-fuchsia-800);
  --uibtn-bg: var(--color-fuchsia-950);
  --uibtn-border: var(--color-fuchsia-700);
  --uibtn-text: var(--color-fuchsia-400);
  --uibtn-hover-bg: var(--color-fuchsia-500);
  --uibtn-hover-border: var(--color-fuchsia-500);
  --uibtn-hover-text: var(--color-fuchsia-100);
  --uibtn-active-bg: var(--color-fuchsia-600);
  --uibtn-active-border: var(--color-fuchsia-600);
  --uibtn-active-text: var(--color-fuchsia-800);
  --uibtn-disabled-bg: var(--color-fuchsia-400);
  --uibtn-disabled-border: var(--color-fuchsia-600);
  --uibtn-disabled-text: var(--color-fuchsia-800);
  --uibtn-disabled-hover-text: var(--color-fuchsia-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-fuchsia.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* PINK */
.UIBTN.UI-pink {
  --uibtn-bg: var(--color-pink-500);
  --uibtn-border: var(--color-pink-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-pink-500);
  --uibtn-hover-bg: var(--color-pink-400);
  --uibtn-hover-border: var(--color-pink-400);
  --uibtn-hover-text: var(--color-pink-950);
  --uibtn-active-bg: var(--color-pink-600);
  --uibtn-active-border: var(--color-pink-600);
  --uibtn-active-text: var(--fw-static-white-000);
  --uibtn-active-shadow-ring: var(--color-pink-600);
  --uibtn-disabled-bg: var(--color-pink-600);
  --uibtn-disabled-border: var(--color-pink-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-pink {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-pink:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-pink.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-pink[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-pink:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
}

.UIBTN.UI-pink:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-pink.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-pink-800);
  --uibtn-bg: var(--color-pink-950);
  --uibtn-border: var(--color-pink-700);
  --uibtn-text: var(--color-pink-400);
  --uibtn-hover-bg: var(--color-pink-500);
  --uibtn-hover-border: var(--color-pink-500);
  --uibtn-hover-text: var(--color-pink-100);
  --uibtn-active-bg: var(--color-pink-600);
  --uibtn-active-border: var(--color-pink-600);
  --uibtn-active-text: var(--color-pink-800);
  --uibtn-disabled-bg: var(--color-pink-400);
  --uibtn-disabled-border: var(--color-pink-600);
  --uibtn-disabled-text: var(--color-pink-800);
  --uibtn-disabled-hover-text: var(--color-pink-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-pink.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* SLATE */
.UIBTN.UI-slate {
  --uibtn-bg: var(--color-slate-500);
  --uibtn-border: var(--color-slate-500);
  --uibtn-text: var(--color-slate-950);
  --uibtn-shadow-soft: rgba(33, 38, 54, 0.18);
  --uibtn-shadow-hi: rgba(219, 224, 232, 0.3);
  --uibtn-shadow-lo: rgba(33, 38, 54, 0.48);
  --uibtn-shadow-ring: var(--color-slate-500);
  --uibtn-shadow-depth: rgba(33, 38, 54, 0.36);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-hover-bg: var(--color-slate-400);
  --uibtn-hover-border: var(--color-slate-400);
  --uibtn-hover-text: var(--fw-white-000);
  --uibtn-active-bg: var(--color-slate-600);
  --uibtn-active-border: var(--color-slate-600);
  --uibtn-active-text: var(--color-slate-950);
  --uibtn-active-shadow-soft: rgba(33, 38, 54, 0.22);
  --uibtn-active-shadow-ring: var(--color-slate-600);
  --uibtn-active-shadow-depth: rgba(33, 38, 54, 0.42);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
  --uibtn-disabled-bg: var(--color-slate-600);
  --uibtn-disabled-border: var(--color-slate-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-slate:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-slate.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-slate[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-slate:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-slate-950);
  --uibtn-shadow-soft: rgba(33, 38, 54, 0.24);
  --uibtn-shadow-hi: rgba(202, 208, 218, 0.22);
  --uibtn-shadow-lo: rgba(33, 38, 54, 0.56);
  --uibtn-shadow-ring: var(--color-slate-600);
  --uibtn-shadow-depth: rgba(33, 38, 54, 0.44);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

.UIBTN.UI-slate:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-slate.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-slate-800);
  --uibtn-bg: var(--color-slate-950);
  --uibtn-border: var(--color-slate-700);
  --uibtn-text: var(--color-slate-400);
  --uibtn-hover-bg: var(--color-slate-500);
  --uibtn-hover-border: var(--color-slate-500);
  --uibtn-hover-text: var(--color-slate-100);
  --uibtn-active-bg: var(--color-slate-600);
  --uibtn-active-border: var(--color-slate-600);
  --uibtn-active-text: var(--color-slate-800);
  --uibtn-disabled-bg: var(--color-slate-400);
  --uibtn-disabled-border: var(--color-slate-600);
  --uibtn-disabled-text: var(--color-slate-800);
  --uibtn-disabled-hover-text: var(--color-slate-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-slate.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* GRAY */
.UIBTN.UI-gray {
  --uibtn-bg: var(--color-gray-500);
  --uibtn-border: var(--color-gray-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-gray-500);
  --uibtn-hover-bg: var(--color-gray-400);
  --uibtn-hover-border: var(--color-gray-400);
  --uibtn-hover-text: var(--color-gray-950);
  --uibtn-active-bg: var(--color-gray-600);
  --uibtn-active-border: var(--color-gray-600);
  --uibtn-active-text: var(--color-gray-800);
  --uibtn-active-shadow-ring: var(--color-gray-600);
  --uibtn-disabled-bg: var(--color-gray-600);
  --uibtn-disabled-border: var(--color-gray-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-gray {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-gray:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-gray.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-gray[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-gray:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-gray-900);
}

.UIBTN.UI-gray:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-gray.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-gray-800);
  --uibtn-bg: var(--color-gray-950);
  --uibtn-border: var(--color-gray-700);
  --uibtn-text: var(--color-gray-400);
  --uibtn-hover-bg: var(--color-gray-500);
  --uibtn-hover-border: var(--color-gray-500);
  --uibtn-hover-text: var(--color-gray-100);
  --uibtn-active-bg: var(--color-gray-600);
  --uibtn-active-border: var(--color-gray-600);
  --uibtn-active-text: var(--color-gray-800);
  --uibtn-disabled-bg: var(--color-gray-400);
  --uibtn-disabled-border: var(--color-gray-600);
  --uibtn-disabled-text: var(--color-gray-800);
  --uibtn-disabled-hover-text: var(--color-gray-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-gray.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* ZINC */
.UIBTN.UI-zinc {
  --uibtn-bg: var(--color-zinc-500);
  --uibtn-border: var(--color-zinc-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-zinc-500);
  --uibtn-hover-bg: var(--color-zinc-400);
  --uibtn-hover-border: var(--color-zinc-400);
  --uibtn-hover-text: var(--color-zinc-50);
  --uibtn-active-bg: var(--color-zinc-600);
  --uibtn-active-border: var(--color-zinc-600);
  --uibtn-active-text: var(--color-zinc-800);
  --uibtn-active-shadow-ring: var(--color-zinc-600);
  --uibtn-disabled-bg: var(--color-zinc-600);
  --uibtn-disabled-border: var(--color-zinc-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-zinc {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-zinc:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-zinc.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-zinc[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-zinc:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-zinc-900);
}

.UIBTN.UI-zinc:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-zinc.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-zinc-800);
  --uibtn-bg: var(--color-zinc-950);
  --uibtn-border: var(--color-zinc-700);
  --uibtn-text: var(--color-zinc-400);
  --uibtn-hover-bg: var(--color-zinc-500);
  --uibtn-hover-border: var(--color-zinc-500);
  --uibtn-hover-text: var(--color-zinc-100);
  --uibtn-active-bg: var(--color-zinc-600);
  --uibtn-active-border: var(--color-zinc-600);
  --uibtn-active-text: var(--color-zinc-800);
  --uibtn-disabled-bg: var(--color-zinc-400);
  --uibtn-disabled-border: var(--color-zinc-600);
  --uibtn-disabled-text: var(--color-zinc-800);
  --uibtn-disabled-hover-text: var(--color-zinc-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-zinc.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* NEUTRAL */
.UIBTN.UI-neutral {
  --uibtn-bg: var(--color-neutral-500);
  --uibtn-border: var(--color-neutral-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-neutral-500);
  --uibtn-hover-bg: var(--color-neutral-400);
  --uibtn-hover-border: var(--color-neutral-400);
  --uibtn-hover-text: var(--color-neutral-950);
  --uibtn-active-bg: var(--color-neutral-600);
  --uibtn-active-border: var(--color-neutral-600);
  --uibtn-active-text: var(--color-neutral-800);
  --uibtn-active-shadow-ring: var(--color-neutral-600);
  --uibtn-disabled-bg: var(--color-neutral-600);
  --uibtn-disabled-border: var(--color-neutral-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-neutral {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-neutral:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-neutral.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-neutral[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-neutral:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-neutral-900);
}

.UIBTN.UI-neutral:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-neutral.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-neutral-800);
  --uibtn-bg: var(--color-neutral-950);
  --uibtn-border: var(--color-neutral-700);
  --uibtn-text: var(--color-neutral-400);
  --uibtn-hover-bg: var(--color-neutral-500);
  --uibtn-hover-border: var(--color-neutral-500);
  --uibtn-hover-text: var(--color-neutral-100);
  --uibtn-active-bg: var(--color-neutral-600);
  --uibtn-active-border: var(--color-neutral-600);
  --uibtn-active-text: var(--color-neutral-800);
  --uibtn-disabled-bg: var(--color-neutral-400);
  --uibtn-disabled-border: var(--color-neutral-600);
  --uibtn-disabled-text: var(--color-neutral-800);
  --uibtn-disabled-hover-text: var(--color-neutral-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-neutral.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* STONE */
.UIBTN.UI-stone {
  --uibtn-bg: var(--color-stone-500);
  --uibtn-border: var(--color-stone-500);
  --uibtn-text: var(--fw-static-white-000);
  --uibtn-shadow-ring: var(--color-stone-500);
  --uibtn-hover-bg: var(--color-stone-400);
  --uibtn-hover-border: var(--color-stone-400);
  --uibtn-hover-text: var(--color-stone-950);
  --uibtn-active-bg: var(--color-stone-600);
  --uibtn-active-border: var(--color-stone-600);
  --uibtn-active-text: var(--color-stone-800);
  --uibtn-active-shadow-ring: var(--color-stone-600);
  --uibtn-disabled-bg: var(--color-stone-600);
  --uibtn-disabled-border: var(--color-stone-600);
  --uibtn-disabled-text: var(--fw-black-000);
}

.UIBTN.UI-stone {
  --uibtn-shadow-soft: rgba(0, 0, 0, 0.18);
  --uibtn-shadow-hi: rgba(255, 255, 255, 0.24);
  --uibtn-shadow-lo: rgba(0, 0, 0, 0.42);
  --uibtn-shadow-depth: rgba(0, 0, 0, 0.35);
  --uibtn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-shadow-ring) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
  --uibtn-active-shadow-soft: rgba(0, 0, 0, 0.2);
  --uibtn-active-shadow-depth: rgba(0, 0, 0, 0.4);
  --uibtn-active-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-active-shadow-ring) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-active-shadow-depth) 0px 1px 3px 0px;
  background: var(--uibtn-bg);
  box-shadow: var(--uibtn-shadow);
}

.UIBTN.UI-stone:hover {
  background: var(--uibtn-hover-bg);
  color: var(--uibtn-hover-text);
  box-shadow: var(--uibtn-hover-shadow);
  border: 1px solid var(--uibtn-hover-border);
  transform: translateY(0px);
}

.UIBTN.UI-stone.is-pressed {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-stone[aria-pressed="true"] {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-stone:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--color-stone-900);
}

.UIBTN.UI-stone:active:not(:disabled) {
  background: var(--uibtn-active-bg);
  color: var(--uibtn-active-text);
  border: 1px solid var(--uibtn-active-border);
  box-shadow: var(--uibtn-active-shadow);
  transform: translateY(2px);
}

.UIBTN.UI-stone.UI-simple {
  --uibtn-hover-shadow: 0px 0px 0px 1px var(--uibtn-hover-shadow-ring);
  --uibtn-hover-shadow-ring: var(--color-stone-800);
  --uibtn-bg: var(--color-stone-950);
  --uibtn-border: var(--color-stone-700);
  --uibtn-text: var(--color-stone-400);
  --uibtn-hover-bg: var(--color-stone-500);
  --uibtn-hover-border: var(--color-stone-500);
  --uibtn-hover-text: var(--color-stone-100);
  --uibtn-active-bg: var(--color-stone-600);
  --uibtn-active-border: var(--color-stone-600);
  --uibtn-active-text: var(--color-stone-800);
  --uibtn-disabled-bg: var(--color-stone-400);
  --uibtn-disabled-border: var(--color-stone-600);
  --uibtn-disabled-text: var(--color-stone-800);
  --uibtn-disabled-hover-text: var(--color-stone-950);
  --uibtn-disabled-shadow: none;
  --uibtn-disabled-opacity: 0.7;
}

.UIBTN.UI-stone.UI-simple:disabled {
  --uibtn-bg: var(--uibtn-disabled-bg);
  --uibtn-border: var(--uibtn-disabled-border);
  --uibtn-text: var(--uibtn-disabled-text);
  --uibtn-hover-text: var(--uibtn-disabled-hover-text);
  --uibtn-shadow: var(--uibtn-disabled-shadow);
  box-shadow: var(--uibtn-disabled-shadow);
  opacity: var(--uibtn-disabled-opacity);
}

/* Prefer border-color over colored outer ring on hover to avoid visual size shift */
.UIBTN:is(.UI-rose, .UI-red, .UI-orange, .UI-amber, .UI-yellow, .UI-lime, .UI-green, .UI-emerald, .UI-teal, .UI-cyan, .UI-sky, .UI-blue, .UI-indigo, .UI-violet, .UI-purple, .UI-fuchsia, .UI-pink, .UI-slate, .UI-gray, .UI-zinc, .UI-neutral, .UI-stone):hover {
  box-shadow: none;
  border: 1px solid var(--uibtn-hover-border);
}

/* Keep all non-simple color hovers from visually shrinking */
.UIBTN:is(.UI-rose, .UI-red, .UI-orange, .UI-amber, .UI-yellow, .UI-lime, .UI-green, .UI-emerald, .UI-teal, .UI-cyan, .UI-sky, .UI-blue, .UI-indigo, .UI-violet, .UI-purple, .UI-fuchsia, .UI-pink, .UI-slate, .UI-gray, .UI-zinc, .UI-neutral, .UI-stone):not(.UI-simple):hover {
  border: 1px solid var(--uibtn-hover-border);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-soft) 0px 1px 1px 0px,
    var(--uibtn-hover-border) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, var(--uibtn-shadow-depth) 0px 2px 5px 0px;
}

/* Explicit non-simple hover border shade per color */
.UIBTN.UI-rose:not(.UI-simple) {
  --uibtn-hover-border: var(--color-rose-700);
}

.UIBTN.UI-red:not(.UI-simple) {
  --uibtn-hover-border: var(--color-red-700);
}

.UIBTN.UI-orange:not(.UI-simple) {
  --uibtn-hover-border: var(--color-orange-700);
}

.UIBTN.UI-amber:not(.UI-simple) {
  --uibtn-hover-border: var(--color-amber-700);
}

.UIBTN.UI-yellow:not(.UI-simple) {
  --uibtn-hover-border: var(--color-yellow-700);
}

.UIBTN.UI-lime:not(.UI-simple) {
  --uibtn-hover-border: var(--color-lime-700);
}

.UIBTN.UI-green:not(.UI-simple) {
  --uibtn-hover-border: var(--color-green-700);
}

.UIBTN.UI-emerald:not(.UI-simple) {
  --uibtn-hover-border: var(--color-emerald-700);
}

.UIBTN.UI-teal:not(.UI-simple) {
  --uibtn-hover-border: var(--color-teal-700);
}

.UIBTN.UI-cyan:not(.UI-simple) {
  --uibtn-hover-border: var(--color-cyan-700);
}

.UIBTN.UI-sky:not(.UI-simple) {
  --uibtn-hover-border: var(--color-sky-700);
}

.UIBTN.UI-blue:not(.UI-simple) {
  --uibtn-hover-border: var(--color-blue-700);
}

.UIBTN.UI-indigo:not(.UI-simple) {
  --uibtn-hover-border: var(--color-indigo-700);
}

.UIBTN.UI-violet:not(.UI-simple) {
  --uibtn-hover-border: var(--color-violet-700);
}

.UIBTN.UI-purple:not(.UI-simple) {
  --uibtn-hover-border: var(--color-purple-700);
}

.UIBTN.UI-fuchsia:not(.UI-simple) {
  --uibtn-hover-border: var(--color-fuchsia-700);
}

.UIBTN.UI-pink:not(.UI-simple) {
  --uibtn-hover-border: var(--color-pink-700);
}

.UIBTN.UI-slate:not(.UI-simple) {
  --uibtn-hover-border: var(--color-slate-700);
}

.UIBTN.UI-gray:not(.UI-simple) {
  --uibtn-hover-border: var(--color-gray-700);
}

.UIBTN.UI-zinc:not(.UI-simple) {
  --uibtn-hover-border: var(--color-zinc-700);
}

.UIBTN.UI-neutral:not(.UI-simple) {
  --uibtn-hover-border: var(--color-neutral-700);
}

.UIBTN.UI-stone:not(.UI-simple) {
  --uibtn-hover-border: var(--color-stone-700);
}

/* Remove colored ring shadow growth; use border color only for state emphasis */
.UIBTN:is(.UI-rose, .UI-red, .UI-orange, .UI-amber, .UI-yellow, .UI-lime, .UI-green, .UI-emerald, .UI-teal, .UI-cyan, .UI-sky, .UI-blue, .UI-indigo, .UI-violet, .UI-purple, .UI-fuchsia, .UI-pink, .UI-slate, .UI-gray, .UI-zinc, .UI-neutral, .UI-stone) {
  --uibtn-shadow-ring: transparent;
  --uibtn-hover-shadow-ring: transparent;
  --uibtn-active-shadow-ring: transparent;
}

.UIBTN:is(.UI-rose, .UI-red, .UI-orange, .UI-amber, .UI-yellow, .UI-lime, .UI-green, .UI-emerald, .UI-teal, .UI-cyan, .UI-sky, .UI-blue, .UI-indigo, .UI-violet, .UI-purple, .UI-fuchsia, .UI-pink, .UI-slate, .UI-gray, .UI-zinc, .UI-neutral, .UI-stone):active:not(:disabled),
.UIBTN:is(.UI-rose, .UI-red, .UI-orange, .UI-amber, .UI-yellow, .UI-lime, .UI-green, .UI-emerald, .UI-teal, .UI-cyan, .UI-sky, .UI-blue, .UI-indigo, .UI-violet, .UI-purple, .UI-fuchsia, .UI-pink, .UI-slate, .UI-gray, .UI-zinc, .UI-neutral, .UI-stone).is-pressed,
.UIBTN:is(.UI-rose, .UI-red, .UI-orange, .UI-amber, .UI-yellow, .UI-lime, .UI-green, .UI-emerald, .UI-teal, .UI-cyan, .UI-sky, .UI-blue, .UI-indigo, .UI-violet, .UI-purple, .UI-fuchsia, .UI-pink, .UI-slate, .UI-gray, .UI-zinc, .UI-neutral, .UI-stone)[aria-pressed="true"] {
  box-shadow: none;
  border: 1px solid var(--uibtn-active-border);
}