:root {
    --color-primary: #8f2f21;
    --color-secondary: #47525d;

    --color-danger: #8f2f21;
    --color-warning: #F0AD4E;
    --color-success: #5CB85C;

    --color-dark: #1b1b1b;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-light: var(--color-secondary);
    --color-light-grey: #f8f8f8;

    --font-size: 1.1rem;
    --font-color: var(--color-dark);
    --font-family: Helvetica, Arial, sans-serif;

    --border-radius: 3px;
    --border-padding: 15vw;

    --background-color: var(--color-white);
}

code {
    --font-color: var(--color-dark);
    --background-color: var(--color-light-grey);
}

.box-alert.danger {
    --font-color: var(--color-danger);
    --background-color: var(--color-white);
}

.box-alert.warning {
    --font-color: var(--color-warning);
    --background-color: var(--color-white);
}

.box-alert.success {
    --font-color: var(--color-success);
    --background-color: var(--color-white);
}

.status>.in,
.status>.out,
.status>.error,
.files-limit-warning {
    --font-color: var(--color-white);
}

.status>.out {
    --background-color: var(--color-warning);
}

.status>.in {
    --background-color: var(--color-success);
}

.status>.error,
.files-limit-warning {
    --background-color: var(--color-danger);
}

.social-link {
    --font-color: var(--color-white);
    --background-color: var(--color-secondary);
}

.social-link:hover,
.social-link:focus {
    --font-color: var(--color-secondary);
    --background-color: var(--color-white);
}

.required::after {
    --font-color: var(--color-danger);
}

.popup-title,
.popup-content {
    --background-color: var(--color-white);
}

.popup-title {
    --font-color: var(--color-primary);
}

.popup-content {
    --font-color: var(--color-dark);
}

#header--nav {
    --font-color: var(--color-white);
    --background-color: var(--color-primary);
}

#header--nav .header--nav-link {
    --font-color: var(--color-white);
    --background-color: var(--color-primary);
}

#header--nav .header--nav-link:hover,
#header--nav .header--nav-link:focus,
#header--nav .header--nav-link.active {
    --font-color: var(--color-primary);
    --background-color: var(--color-white);
}

#section {
    --font-color: var(--color-dark);
    --background-color: var(--color-white);
}

#section .admin.menu-bar--link {
    --font-color: var(--color-primary);
    --background-color: var(--color-white);
}

#section .admin.section-article--title,
.toggler.list-title {
    --background-color: var(--color-secondary);
    --font-color: var(--color-white);
}

#section h1,
#section h2,
#section h3,
#section .btn,
#section fieldset,
#section legend {
    --font-color: var(--color-primary);
}

#section .btn:not(:hover, :focus, .actif) {
    --font-color: var(--color-white);
    --background-color: var(--color-primary);
}

#footer--info {
    --font-color: var(--color-white);
    --background-color: var(--color-light);
}