:root {
  --primary-color: #89CFF0; /* Baby Blue */
  --secondary-color: #FFB347; /* Pastel Orange */
  --accent-color: #77dd77; /* Pastel Green */
  --warning-color: #f1c40f;
  --danger-color: #e74c3c;
}

.button.color-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.button.color-secondary {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.button.color-accent {
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.button.color-warning {
    color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

.button.color-danger {
    color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

.button-primary.color-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.button-primary.color-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.button-primary.color-accent {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.button-primary.color-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

.button-primary.color-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

.flex {
  display: flex;
  gap: 20px;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-intrinsic-size {
  flex-grow: 0;
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}