:root {
    /* Page Layout */
    --sidebar-width: 25rem;
    --narrow-content-width: 36rem;
    --normal-content-width: 42rem;
    --wide-content-width: 46rem;
    --narrow-page-width: 90rem;
    --normal-page-width: 120rem;
    --wide-page-width: 150rem;

    /* Section Heights */
    --section-height-small: 15rem;
    --section-height-medium: 25rem;
    --section-height-large: 35rem;

    /* Letter spacing */
    --letter-spacing-sm: 0.06em;
    --letter-spacing-md: 0.13em;

    /* Font families */
    --font-body--family: Arimo, sans-serif;
    --font-body--style: normal;
    --font-body--weight: 400;
    --font-subheading--family: Arimo, sans-serif;
    --font-subheading--style: normal;
    --font-subheading--weight: 400;
    --font-heading--family: Bevan, serif;
    --font-heading--style: normal;
    --font-heading--weight: 400;
    --font-accent--family: "Anonymous Pro", monospace;
    --font-accent--style: normal;
    --font-accent--weight: 400;

    /* Typography presets */
    --font-size--paragraph: 0.875rem;
    --font-size--h1: clamp(3.0rem, 7.2vw, 4.5rem);
    --font-size--h2: clamp(2.25rem, 4.8vw, 3.0rem);
    --font-size--h3: 2.0rem;
    --font-size--h4: 1.5rem;
    
    /* Colors */
    --color-error: #8B0000;
    --color-success: #006400;
    --color-white: #FFFFFF;
    --color-white-rgb: 255 255 255;
    --color-black: #000000;

    /* Spacing */
    --margin-md: 0.8rem;
    --padding-md: 0.8rem;
    --gap-md: 0.9rem;
}

:root,
.color-scheme-1 {
    --color-background: rgb(255 255 255 / 1.0);
    --color-background-rgb: 255 255 255;
    --color-foreground: rgb(9 10 17 / 1.0);
    --color-foreground-rgb: 9 10 17;
    --color-foreground-heading: rgb(0 0 0 / 1.0);
    --color-primary: rgb(35 39 67 / 1.0);
    --color-border: rgb(240 241 244 / 1.0);
    --color-shadow: rgb(0 0 0 / 1.0);
    --color-primary-button-text: rgb(240 241 244 / 1.0);
    --color-primary-button-background: rgb(35 39 67 / 1.0);
}

.color-scheme-2 {
    --color-background: rgb(18 18 18 / 1.0);
    --color-background-rgb: 18 18 18;
    --color-foreground: rgb(240 241 244 / 1.0);
    --color-foreground-rgb: 240 241 244;
    --color-foreground-heading: rgb(255 255 255 / 1.0);
    --color-primary: rgb(211 213 222 / 1.0);
    --color-border: rgb(9 10 17 / 1.0);
    --color-shadow: rgb(0 0 0 / 1.0);
}

body {
    color: var(--color-foreground);
    background-color: var(--color-background);
    font-family: var(--font-body--family);
}