/** Add your extra/custom CSS classes below */
/* =========================================
   PALETA
   ========================================= */

:root {
    --cream: #F4EBDD;
    --lavender: #8882B0;
    --blue: #66749A;
    --coral: #E58C72;
    --orange: #D96A3A;
    --sage: #7D8A72;
    --red: #C94332;
    --dark: #343342;

    --md-default-bg-color: var(--cream);
    --md-default-fg-color: var(--dark);

    --md-primary-fg-color: var(--blue);
    --md-primary-fg-color--light: #8290B2;
    --md-primary-fg-color--dark: #515E7E;

    --md-accent-fg-color: var(--coral);
}


/* =========================================
   FONDO
   ========================================= */

body,
.md-main {
    background-color: var(--cream);
}


/* =========================================
   TIPOGRAFÍA
   ========================================= */

body {
    font-family: "Montserrat", sans-serif;
    color: var(--dark);
}

.md-typeset {
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    line-height: 1.7;
}


/* =========================================
   TÍTULOS — PLAYFAIR DISPLAY
   ========================================= */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
}


/* H1 */

.md-typeset h1 {
    color: var(--blue);
    font-size: 2.8rem;
    line-height: 1.15;
}


/* H2 */

.md-typeset h2 {
    color: var(--lavender);
    font-size: 2rem;
}


/* H3 */

.md-typeset h3 {
    color: var(--orange);
    font-size: 1.5rem;
}

/* =========================================
   LINKS
   ========================================= */

.md-typeset a {
    color: var(--orange);
}

.md-typeset a:hover {
    color: var(--red);
}


/* =========================================
   BARRA SUPERIOR
   ========================================= */

.md-header {
    background: linear-gradient(
        90deg,
        #66749A 0%,
        #8882B0 45%,
        #D96A3A 100%
    );
}


/* =========================================
   NAVEGACIÓN
   ========================================= */

.md-tabs {
    background: linear-gradient(
        90deg,
        #66749A 0%,
        #8882B0 45%,
        #D96A3A 100%
    );
}

.md-tabs__link {
    font-family: "Playfair Display", serif;
}


/* =========================================
   SIDEBAR
   ========================================= */

.md-nav__link {
    font-family: "Playfair Display", serif;
}


/* =========================================
   IMÁGENES
   ========================================= */

.md-typeset img {
    border-radius: 6px;
}


/* =========================================
   BLOQUES DE CITA
   ========================================= */

.md-typeset blockquote {
    border-left-color: var(--coral);
}


/* =========================================
   TABLAS
   ========================================= */

.md-typeset table:not([class]) th {
    background-color: var(--lavender);
    color: white;
}

.md-typeset table:not([class]) {
    background-color: rgba(255,255,255,0.35);
}


/* =========================================
   CÓDIGO
   ========================================= */

code {
    font-family: "Roboto Mono", monospace;
}