:root {
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-info: var(--color-info);

  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);

  --bs-font-sans-serif: var(--font-base);
}

/* PRIMARY BUTTONS */
.btn-primary, .btn-outline-primary {
    --bs-btn-color: var(--color-white);
    --bs-btn-border-color: var(--color-primary);

    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 80%, black);

    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 70%, black);
}
.btn-primary {
    --bs-btn-bg: var(--color-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
}

/* SECONDARY BUTTONS */
.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--color-white);
    --bs-btn-border-color: var(--color-secondary);

    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-secondary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-secondary) 80%, black);

    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-secondary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-secondary) 70%, black);
}
.btn-secondary {
    --bs-btn-bg: var(--color-secondary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--color-secondary);
}

/* SUCCESS BUTTONS */
.btn-success, .btn-outline-success {
    --bs-btn-color: var(--color-white);
    --bs-btn-border-color: var(--color-success);

    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-success) 80%, black);

    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-success) 70%, black);
}
.btn-success {
    --bs-btn-bg: var(--color-success);
}
.btn-outline-success {
    --bs-btn-color: var(--color-success);
}

/* WARNING BUTTONS */
.btn-warning, .btn-outline-warning {
    --bs-btn-color: var(--color-black);
    --bs-btn-border-color: var(--color-warning);

    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-warning) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-warning) 80%, black);

    --bs-btn-active-color: var(--color-black);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-warning) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-warning) 70%, black);
}
.btn-warning {
    --bs-btn-bg: var(--color-warning);
}
.btn-outline-warning {
    --bs-btn-color: var(--color-warning);
}

/* DANGER BUTTONS */
.btn-danger, .btn-outline-danger {
    --bs-btn-color:  var(--color-white);
    --bs-btn-border-color: var(--color-danger);

    --bs-btn-hover-color:  var(--color-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-danger) 80%, black);

    --bs-btn-active-color:  var(--color-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-danger) 70%, black);
}
.btn-danger {
    --bs-btn-bg: var(--color-danger);
}
.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
}

/* INFO BUTTONS */
.btn-info, .btn-outline-info {
    --bs-btn-color:  var(--color-white);
    --bs-btn-border-color: var(--color-info);

    --bs-btn-hover-color:  var(--color-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-info) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-info) 80%, black);

    --bs-btn-active-color:  var(--color-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-info) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-info) 70%, black);
}
.btn-info {
    --bs-btn-bg: var(--color-info);
}
.btn-outline-info {
    --bs-btn-color: var(--color-info);
}