@layer variables, base, layout, syntax-highlighting;

@import '_base.css' layer(base);
@import '_layout.css' layer(layout);
@import '_syntax-highlighting.css' layer(syntax-highlighting);

@layer variables {
  :root {
    /* Our variables */
    --base-font-family: Helvetica, Arial, sans-serif;
    --base-font-size: 1em;
    --small-font-size: calc(var(--base-font-size) * 0.9);
    --base-line-height: 2em;

    --spacing-unit: 30px;

    --text-color: #111;
    --background-color: #fdfdfd;
    --brand-color: #2a7ae2;

    --grey-color: #444444;
    --grey-color-light: lighten(var(--grey-color), 40%);
    --grey-color-dark: darken(var(--grey-color), 25%);

    /* Width of the content area */
    --content-width: 800px;
  }
}