:root {
    --color: var(--color);
    --color-revers: #fff;
    --bg-body: #fff;
    --background: hsla(0, 0%, 100%, 1);
    --background-grey: hsla(0, 0%, 97%, 1);
    --background-border-grey: hsla(0, 1%, 84%, 1);
    --danger: hsla(4, 77%, 48%, 1);
    --danger-hover: hsla(4, 77%, 56%, 1);
    --success: hsla(159, 53%, 32%, 1);
    --success-hover: hsla(159, 53%, 40%, 1);
    --primary: hsla(214, 70%, 35%, 1);
    --primary-hover: hsla(214, 70%, 44%, 1);
    --warning: hsla(48, 66%, 56%, 1);
    --warning-hover: hsla(48, 66%, 64%, 1);
}

.dark{

}

.green {
    background-color: rgba(38, 125, 95, 0.75);
    color: var(--background);
}
.red {
    background-color: rgba(218, 41, 28, 0.75);
    color: var(--background);
}

.success{
    color:var(--success);
}

.warning {
    color: var(--warning);
}

.danger {
    color: var(--danger);
}