global.css

:root {
    --blue-40: hsl(190, 100%, 40%);
    --blue-45: hsl(190, 100%, 45%);
    --blue-55: hsl(190, 100%, 55%);
    --blue-70: hsl(190, 100%, 70%);
    --blue-76: hsl(181, 76%, 70%);
    --blue-100: hsl(176, 100%, 50%);


    --violet-15: hsl(270, 100%, 15%);
    --violet-21: hsl(270, 96%, 21%);
    --violet-29: hsl(276, 91%, 29%);
    --violet-35: hsl(276, 91%, 35%);
    --violet-40: hsl(276, 91%, 40%);
    --violet-50: hsl(276, 91%, 50%);
    --violet-60: hsl(276, 91%, 60%);
    --violet-70: hsl(276, 91%, 70%);
    --violet-75: hsl(276, 91%, 75%);
    --violet-85: hsl(276, 91%, 85%);
    --violet-97: hsl(276, 91%, 97%);
    --violet-100-88: hsl(276, 100%, 84%);

    --purple-40: hsl(285, 70%, 40%);
    --purple-45: hsl(285, 70%, 45%);
    --purple-55: hsl(285, 70%, 55%);
    --purple-65: hsl(285, 70%, 65%);
    --purple-90: hsl(285, 70%, 90%);

    --white: hsl(0, 100%, 100%);
    --white-18: hsl(282, 10%, 80%);

    --black-13: hsl(260, 5%, 13%);
    --black-14: hsl(210, 14%, 89%);
    --black-26: hsl(270, 5%, 26%);

    --primary: var(--violet-35);
    --secondary: var(--purple-40);

    --primary-hover: var(--violet-29);
    --secondary-hover: var(--purple-45);

    --background: var(--white);
    --content-background: #f8f9fa;

    --font-color: #000;
    --secondary-color: #fff;
    --color-font: var(--purple-55);
    --border-color: var(--black-14);

}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: var(--violet-60);
        --secondary: var(--purple-55);

        --primary-hover: var(--violet-70);
        --secondary-hover: var(--purple-65);

        --background: var(--black-13);
        --content-background: var(--black-26);

        --font-color: #fff;
        --secondary-color: #000;
        --color-font: var(--purple-90);
        --border-color: var(--white-18);
    }

    .btn-close {
        filter: invert(100%);
    }
}

* {
    box-sizing: border-box;
    border-color: var(--white-18);
}

body {
    background-color: var(--background);
    color: var(--font-color);

    font-family: Vazirmatn, sans-serif;
}

.theme-dependant {
    background-color: var(--content-background) !important;
}

p {
    margin-bottom: 0;
}

input {
    background-color: var(--background) !important;
    color: var(--font-color) !important;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

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

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-outline-primary:active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);

}

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

.btn-secondary:active {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

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

.autocomplete {
    position: relative;
}

.autocomplete .options {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    max-height: 30rem;
    overflow-y: auto;

    z-index: 20;
}

.text-bg-warning {
    background-color: var(--violet-100-88) !important;
}

.text-colored {
    color: var(--color-font);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: none;
}

.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.form-check-input:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem hsla(276, 91%, 29%, 0.207);
}