:root {
    --light-background-color: #f4f5f3;
    --light-foreground-color: #1d3557;
    --light-background-color: #fffcf0;
    --light-foreground-color: #100f0f;

    /* Neutrals */
    --light-color-gray: #6b7280; /* text gray */
    --light-color-muted: #a0a0a0; /* UI border / secondary */
    --light-color-soft: #e2e2df; /* UI backgrounds, blockquotes */

    /* Accent system */
    --light-color-red: #c92a2a; /* warning, highlight */
    --light-color-orange: #e08e1f; /* attention blocks */
    --light-color-yellow: #d4af37; /* vintage punchcard yellow */
    --light-color-green: #4ca06b; /* success, approval */
    --light-color-cyan: #2aa198; /* teal-y terminal feel */
    --light-color-blue: #3b82f6; /* link, info */
    --light-color-purple: #7e5bef; /* utility, label tags */
    --light-color-pink: #d16d92; /* softer technical touch */
    --light-color-red: #af3029; /* warning, highlight */
    --light-color-orange: #bc5215; /* attention blocks */
    --light-color-yellow: #ad8301; /* vintage punchcard yellow */
    --light-color-green: #66800b; /* success, approval */
    --light-color-cyan: #24837b; /* teal-y terminal feel */
    --light-color-blue: #205ea6; /* link, info */
    --light-color-purple: #5e409d; /* utility, label tags */
    --light-color-pink: #a02f6f; /* softer technical touch */

    --dark-foreground-color: #f4f5f3;
    --dark-background-color: #1d3557;
    /* Core colors */
    --dark-background-color: #1d1e21; /* dark terminal feel */
    --dark-foreground-color: #f4f5f3; /* same warm white as light bg */
    --dark-background-color: #1c1b1a;
    --dark-foreground-color: #e6e4d9;

    /* Neutrals */
    --dark-color-gray: #c9c9c9; /* text gray */
    --dark-color-muted: #999; /* borders, UI frame */
    --dark-color-soft: #2d2f33; /* dark gray blocks */

    /* Accent system */
    --dark-color-red: #ff6b6b;
    --dark-color-orange: #f0a03d;
    --dark-color-yellow: #f7d774;
    --dark-color-green: #6dd3a4;
    --dark-color-cyan: #63d2c6;
    --dark-color-blue: #5fa8ff;
    --dark-color-purple: #a593f8;
    --dark-color-pink: #ec9abc;
    /* Accent system */
    --dark-color-red: #d14d41;
    --dark-color-orange: #da702c;
    --dark-color-yellow: #ad8301;
    --dark-color-green: #879a39;
    --dark-color-cyan: #24837b;
    --dark-color-blue: #4385be;
    --dark-color-purple: #8b7ec8;
    --dark-color-pink: #ce5d97;

    /* Code and UI extras */
    --accent-color: var(--color-blue);
    --code-normal: var(--foreground-color);
    --bold-color: var(--color-red);
    --italic-color: var(--color-green);

    --dark-accent-color: var(--color-purple);
    --dark-bold-color: var(--color-pink);

    --font-text: "Sohne Mono", "Oktah Round Variable";
    --font-feature: "tnum", "liga", "clig", "kern", "calt", "zero", "ss05";
    --font-header: InterVariable;
    --font-mono: "MonoLisa";
    --font-mono-feature: "liga", "zero", "calt", "ss02", "ss03", "ss07", "ss10", "ss15", "ss16";
    --font-ui: "Sohne Mono";

    --font-ratio: 1.425;
    --font-header-weight: 900;
    --font-header-feature: "liga", "calt", "case", "kern", "cv01", "cv02", "cv03", "cv04", "cv06", "cv09", "cv10", "cv11", "cv12", "cv13";
    --font-header-variation: "";
    --font-header-letter-spacing: -0.065em;
    --font-header-line-height: 0.75em;
    /*--header-color: color-mix(in srgb, var(--foreground-color) 75%, var(--background-color));*/
}

.dark {
    --accent-color: var(--color-purple);
    --bold-color: var(--color-pink);
}

@font-face {
    font-family: "Oktah Round Variable";
    /* Add other properties here, as needed. For example: */
    font-weight: 100 900;
    font-style: normal;
    src: url("https://cdn.ffp.co/oktah_round_variable.woff2");
}
@font-face {
    font-family: "MonoLisa";
    /* Add other properties here, as needed. For example: */
    font-weight: 100 1000;
    font-style: normal;
    src: url("https://cdn.ffp.co/MonoLisa-Regular-Variable.woff2");
}
@font-face {
    font-family: "MonoLisa";
    /* Add other properties here, as needed. For example: */
    font-weight: 100 1000;
    font-style: italic;
    src: url("https://cdn.ffp.co/MonoLisa-RegularItalic-Variable.woff2");
}