@layer vars {
  :root {
    /* Set theme css variables.
    Override css variables in "assets/css/_custom.css" */

    /* The max content width. (Consider using one of the breakpoints.) */
    --max-content-width: 1111px;

    /* The max page width. Defaults to max-content-width.
    Setting this to a larger value than max-content-width allows
    content with class "stretch" to stretch out to the page edge. */
    --max-page-width: var(--max-content-width);

    /* Base line height, unitless. */
    --base-line-height: 1.5;

    /* Heading line height, unitless. */
    --heading-line-height: 1.3;

    /* The font size set on the root html element.
    Specify unitless, it will be recalculated as %. */
    --base-font-size: 18;

    /* Font sizes. */
    --fs-xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem);
    --fs-xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem);
    --fs-xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem);
    --fs-xl: clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem);
    --fs-l: clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem);
    --fs-m: 1rem;
    --fs-s: 0.889rem;
    --fs-xs: 0.778rem;

    /* Modern font stacks. See how they look at https://modernfontstacks.com/.

    The following font family declarations use widely available fonts.
    A user's web browser will look at the comma-separated list and will
    attempt to use each font in turn until it finds one that is available
    on the user's computer. The final "generic" font (sans-serif, serif or
    monospace) hints at what type of font to use if the web browser doesn't
    find any of the fonts in the list. */

    /* stylelint-disable value-keyword-case */

    /* Emojis font stack. Add to end of other stacks when needed. */
    --emojis:         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    /* System-ui font stack. */
    --system-ui:       system-ui, sans-serif;

    /* Serif font stacks. */
    --ui-serif:       ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --transitional:   Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --old:            'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --slab:           Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
    --antique:        Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
    --didone:         Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;

    /* Sans-serif font stacks. */
    --ui-sans-serif:  ui-sans-serif, system-ui, sans-serif;
    --humanist:       Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    --geometric:      Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    --classical:      Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
    --neo:            Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --industrial:     Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    --futura:         Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

    /* Rounded Sans-serif font stacks. */
    --ui-rounded:      ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;

    /* Monospace font stacks. */
    --ui-monospace:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    /* stylelint-enable value-keyword-case */

    /* Font family. */
    --ff-body: var(--ui-serif);
    --ff-headings: var(--ui-sans-serif);
    --ff-alt: var(--system-ui);
    --ff-monospace: var(--ui-monospace);

    /* Font weights. */
    --fw-headings: 700;
    --fw-bolder: 900;
    --fw-bold: 700;
    --fw-medium: 500;
    --fw-normal: 400;
    --fw-light: 300;
    --fw-lighter: 200;

    /* Spacing.
    Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
    mx--m (mx = margin-block) classes. */
    --spacing-xxl: calc(3rem * var(--base-line-height));
    --spacing-xl: calc(2rem * var(--base-line-height));
    --spacing-l: calc(1.5rem * var(--base-line-height));
    --spacing-m: calc(1rem * var(--base-line-height));
    --spacing-s: calc(0.75rem * var(--base-line-height));
    --spacing-xs: calc(0.5rem * var(--base-line-height));
    --spacing-xxs: calc(0.3rem * var(--base-line-height));

    /* Border radius. */
    --radius-xl: 1rem;
    --radius-l: 0.75rem;
    --radius-m: 0.5rem;
    --radius-s: 0.3rem;
    --radius-xs: 0.125rem;

    /* Breakout amount.
    How much should the "breakout" be. Defaults to same as gutters value. */
    --breakout: calc(5px + 1.5625vw);

    /* The left/right gutter/padding. */
    --gutters: calc(5px + 1.5625vw);
    --gutters-reverse: calc(0px - (5px + 1.5625vw));

    /* The amount lists, blockquotes and comments are indented. */
    --indent-amount: 2rem;

    /* The max line width for readability. */
    --max-line-width: 70ch;

    /* The pt font-size to be used for printing. */
    --print-font-size: 12pt;
  }
}