.w-3 {
  min-width: 3rem;
  width: 3rem;
}
.w-4 {
  min-width: 4rem;
  width: 4rem;
}
.w-6 {
  min-width: 6rem;
  width: 6rem;
}
.w-10 {
  min-width: 10rem;
  width: 10rem;
}
.w-20 {
  min-width: 20rem;
  width: 20rem;
}
.w-100p {
  width: 100%;
}


.bg-sky, .input.bg-sky  {
  background-color: var(--sky-50);
}

.bg-blue {
  background-color: var(--blue-50);
}

.bg-cyan {
  background-color: var(--cyan-50);
}

.bg-green {
  background-color: #25D366;
}

.bg-bigblue {
  background-color: #2563EB;
}

.bg-orange, .input.bg-orange {
  background-color: #EA580C;
}

.bg-purple {
  background-color: #7C3AED;
}

.bg-lightgray {
  background-color: var(--gray-50);
}

.text-sky800 {
  color: var(--sky-800);
}

.cursor-pointer {
  cursor: pointer;
}

.border-green {
  border-color:#25D366;
}

.border-orange {
  border-color: #EA580C;
}

.big-hover:hover {
  transform: scale(1.03);
}

.grey-hover:hover {
  background-color: var(--color-secondary);
}

/* Icon sizes matching text scale */
.icon-xs   { width: var(--text-xs);   height: var(--text-xs);   } /* 0.75rem - 12px */
.icon-sm   { width: var(--text-sm);   height: var(--text-sm);   } /* 0.875rem - 14px */
.icon-base { width: var(--text-base); height: var(--text-base); } /* 1rem - 16px */
.icon-lg   { width: var(--text-lg);   height: var(--text-lg);   } /* 1.125rem - 18px */
.icon-xl   { width: var(--text-xl);   height: var(--text-xl);   } /* 1.25rem - 20px */
.icon-2xl  { width: var(--text-2xl);  height: var(--text-2xl);  } /* 1.5rem - 24px */
.icon-3xl  { width: var(--text-3xl);  height: var(--text-3xl);  } /* 1.875rem - 30px */
.icon-4xl  { width: var(--text-4xl);  height: var(--text-4xl);  } /* 2.25rem - 36px */
.icon-5xl  { width: var(--text-5xl);  height: var(--text-5xl);  } /* 3rem - 48px */
.icon-6xl  { width: var(--text-6xl);  height: var(--text-6xl);  } /* 3.75rem - 60px */
.icon-7xl  { width: var(--text-7xl);  height: var(--text-7xl);  } /* 4.5rem - 72px */
.icon-8xl  { width: var(--text-8xl);  height: var(--text-8xl);  } /* 6rem - 96px */
.icon-9xl  { width: var(--text-9xl);  height: var(--text-9xl);  } /* 8rem - 128px */

.badge--sky800 {
  --badge-background: var(--sky-800);
  --badge-border-color: transparent;
  --badge-box-shadow: var(--shadow-sm);
  --badge-color: var(--color-text-reversed);
  border: 0px;
}

.btn--action {
  height: 2rem;
  --btn-padding: var(--size-2);
}