/* colores de marca: valores centralizados usados en about.css, single.css,
   index.css, footer.css, list.css y header.css. Cambiar aquí actualiza
   todo el sitio a la vez. Las variantes "-rgb" son para usarlas dentro de
   rgba(), donde no se puede meter un valor hexadecimal directamente. */
:root {
    --brand-berry: #9C2C87;
    --brand-berry-rgb: 156, 44, 135;
    --brand-teal: #0B6E76;
    --brand-teal-rgb: 11, 110, 118;
    --brand-teal-light: #BBBCC1;
    --brand-gray: #6B6F73;
    --brand-lilac: #E4CBDF;
}

/* light mode */
.light > *{
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

/* dark mode */
/* fondo del body en modo oscuro: evita que se asome el blanco por defecto
   del navegador en los huecos/márgenes entre secciones (p. ej. antes de
   "Posts recientes" en el footer, visible en todas las páginas) */
body.dark {
    background-color: var(--background-color-dark) !important;
}

.dark {
    --background-color: var(--background-color-dark) !important;
    --secondary-background-color: var(--secondary-background-color-dark) !important;
    --text-color: var(--text-color-dark) !important;
    --text-secondary-color: var(--text-secondary-color-dark) !important;
    --primary-color: var(--primary-color-dark);
    --secondary-color: var(--secondary-color-dark);

    /* títulos y texto normal del contenido en modo oscuro (Blog y Recursos) */
    --brand-title-dark: #d7e2e1;

    /* resaltado de sintaxis en modo oscuro */
    --code-keyword: #f64dc5;
    --code-string: #6cb16b;
    --code-function: #a44498;
    --code-number: #4118a4;
}

.text-secondary {
    color: var(--text-secondary-color) !important;
}

#theme-toggle:focus {
    outline: 0;
}

#theme-toggle svg {
    height: 18px;
}

button#theme-toggle {
    border: none;
    font-size: 26px;
    margin: auto 4px;
}

body.dark #moon {
    vertical-align: middle;
    display: none;
}

body:not(.dark) #sun {
    display: none;
}

body *::selection {
    background-color: rgba(227, 167, 59, 0.5) !important;
}