:root {
    --color-light-foreground: #1c1a19;
    --color-light-background: #f4f1eb;

    --color-dark-foreground: #f4f1eb;
    --color-dark-background: #1c1a19;

    --color-accent: #a67873; /* faded rose */
    --color-accent: #c7a98b; /* soft champagne gold */
    --color-code: var(--text-normal);
    --color-bold: var(--color-muted);
    --color-italic: var(--text-normal);

    --color-light-red: #ba5c53; /* rose clay */
    --color-light-orange: #d78a5a; /* terracotta blush */
    --color-light-yellow: #d7b968; /* antique gold */
    --color-light-green: #6da78a; /* eucalyptus leaf */
    --color-light-cyan: #7fb4c5; /* soft seaglass */
    --color-light-blue: #5a87a3; /* vintage denim */
    --color-light-purple: #8a79a4; /* faded lilac */
    --color-light-pink: #c48ca6; /* rosewater blush */

    --color-dark-red: #e68c82; /* ember blush */
    --color-dark-orange: #f0a573; /* glowing clay light */
    --color-dark-yellow: #eacd7f; /* soft candlelight */
    --color-dark-green: #90c2a8; /* sage in moonlight */
    --color-dark-cyan: #9ed0e0; /* pale glacial blue */
    --color-dark-blue: #82aac4; /* dusk lake */
    --color-dark-purple: #b8a3c8; /* cloudy lavender */
    --color-dark-pink: #ebb1d2; /* faded peony glow */

    --font-text: "Montserrat";
    --font-header: "Magnite";
    --font-header-weight: 400;
    --font-ratio: 1.614;
    --font-header-letter-spacing: normal;
    --font-header-line-height: 1.2em;

    --font-density: 1.8;

    --h1-size: 5rem;
    --h2-size: 4rem;
    --h3-size: 3rem;
    --h4-size: 3rem;
}
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    text-align: center;
}
/*
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
    letter-spacing: 0em;
}
body { -webkit-font-smoothing: antialiased; }
.dark body { -webkit-font-smoothing: antialiased; }

article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article table th,
article table td { text-align:center; }

article p {margin:auto;}
*/

@font-face {
    font-family: "Montserrat";
    /* Add other properties here, as needed. For example: */
    font-weight: 100 900;
    font-style: normal;
    src: url("https://cdn.ffp.co/Montserrat-VariableFont_wght.ttf");
}
@font-face {
    font-family: "Montserrat";
    /* Add other properties here, as needed. For example: */
    font-weight: 100 900;
    font-style: italic;
    src: url("https://cdn.ffp.co/Montserrat-Italic-VariableFont_wght.ttf");
}

@font-face {
    font-family: "Magnite";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url("https://cdn.ffp.co/Magnite.otf");
}
@font-face {
    font-family: "Magnite";
    font-weight: normal;
    font-style: italic;
    font-display: swap;
    src: url("https://cdn.ffp.co/Magnite%20Italic.otf");
}