:root {
    --bg-dark: #202020;
    --bg-light: #FFFFFF;

    --bg-color: var(--bg-dark);
    --accent-color:#FF5733;
    --primary-color:#FF5733;
    --primary-border-color: #FF5733;
    --primary-hover-color: #E04E2D;

    --paragraph-color:#CFCFCF;
    --heading-color: #FEF3F0;
    --link-color:#04B8D3;
    --link-hover-color: #00A3C4;
    --text-color: #CFCFCF;
    --bg-muted: #383838;
    --text-muted: #888888;
    --box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075);
    --prefix-icon: var(--bg-light);

    --success-color: #0BD895;
    --success-hover-color: #0AC88C;
    --success-border-color: #067B55;
    --success-text-color: #161616;

    --warning-color: #F6FE05;
    --warning-hover-color: #E5E604;
    --warning-border-color: #B3B907;
    --warning-text-color: #161616;

    --danger-color: #C70239;
    --danger-hover-color: #A0012E;
    --danger-border-color: #700120;
    --danger-text-color: #FFFFFF;

    --info-color: #0416D3;
    --info-hover-color: #030EB3;
    --info-border-color: #040E7C;
    --info-text-color: #FFFFFF;

    --bg-tooltip: #202020;
    --tooltip-text-color: #FEF3F0;
}

@media (prefers-color-scheme: light) {
    --bg-color: var(--bg-light);
    --primary-color:#0416D3;
    --primary-hover-color: #030EB3;
    --primary-border-color: #0416D3;
    --paragraph-color: #413330;
    --heading-color: #3F0E00;
    --link-color:#C70239;
    --link-hover-color: #A0012E;
    --text-color: #413330;
    --bg-muted: #f0f0f0;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --prefix-icon: var(--bg-dark);
}

body[data-theme-version='light'] {
    --bg-color: var(--bg-light);
    --primary-color: #0416D3;
    --primary-hover-color: #030EB3;
    --primary-border-color: #0416D3;
    --paragraph-color: #413330;
    --heading-color: #3F0E00;
    --link-color:#C70239;
    --link-hover-color: #A0012E;
    --text-color: #413330;
    --bg-muted: #f0f0f0;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --prefix-icon: var(--bg-dark);
}

/* BACKGROUND COLOR */
.tt-bg-primary {
    background-color: var(--primary-color);
}

.tt-bg-danger {
    background-color: var(--danger-color);
}

.tt-bg-warning {
    background-color: var(--warning-color);
}

.tt-bg-info {
    background-color: var(--info-color);
}

.tt-bg-success {
    background-color: var(--success-color);
}