@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap");

:root {
    --font-ratio: 1.333;
    --font-density: 1.414;
    --font-size: 1rem;
    --line-width: 60ch;

    --font-text: "Atkinson Hyperlegible Next";
    --font-feature: "liga", "salt", "clig", "kern", "calt", "zero";
    --font-letter-spacing: 0;

    --font-mono: "Atkinson Hyperlegible Mono";

    --font-header: "Fraunces", "Inter Variable";
    --font-header-weight: 400;
    --font-header-feature: "liga";
    --font-header-variation: "SOFT" 75, "WONK" 0;
    --font-header-letter-spacing: 0;
    --font-header-line-height: 1em;

    --light-foreground-color: #222;
    --light-background-color: #ffffff;

    --light-color-red: #b33a2a;
    --light-color-orange: #bc5215;
    --light-color-yellow: #cc8815;
    --light-color-green: #66800b;
    --light-color-cyan: #82a1b2;
    --light-color-blue: #438199;
    --light-color-purple: #5e409d;
    --light-color-pink: #a02f6f;

    --light-accent-color: var(--color-yellow);
    --light-bold-color: var(--color-red);
    --light-italic-color: var(--color-blue);

    /* Dark */
    --dark-foreground-color: oklch(0.7721 0.0228 96.47);
    --dark-background-color: oklch(0.2308 0.0023 67.73);

    --dark-color-red: #d14d41;
    --dark-color-orange: #da702c;
    --dark-color-yellow: #cc8815;
    --dark-color-green: #879a39;
    --dark-color-cyan: #3aa99f;
    --dark-color-blue: #4385be;
    --dark-color-purple: #9a462b;
    --dark-color-pink: #a8431b;

    --dark-accent-color: var(--color-yellow);
    --dark-bold-color: var(--color-red);
    --dark-italic-color: var(--color-blue);

    --bold-weight: 400;
}

article p {
    font-size: 1.15em;
    line-height: 1.414em;
    font-weight: 400;
}

.dark article p {
    font-weight: 350;
}