/* ==================================================================
   Cowell Tactical — design tokens.

   The colors and the two typefaces, and nothing else. Split out of
   site.css so the pages still carrying inline styles can share them:
   they cannot load the whole stylesheet without inheriting its
   headings, paragraph widths and layout, but they can load this.

   site.css imports this file, so there is one definition. Change a
   color here and it changes on every page, inline-styled or not.

   Dark pages add --paper-dark and friends locally; the palette below is
   the light one every page starts from.
   ================================================================== */

:root{
  /* ink and greys */
  --ink:#15171A;        /* body text, headings, the black of the brand */
  --mid:#4C5058;        /* secondary text */
  --grey:#6B7078;       /* labels, captions, hints */
  --rule:#D3D7DC;       /* hairlines between sections */
  --edge:#B6BCC4;       /* control borders: inputs, buttons, swatches */
  --paper:#FFFFFF;      /* cards and panels */
  --wash:#F2F3F5;       /* the quiet fill behind a band */
  --shell:#EDF0F2;      /* the page behind everything */

  /* the one accent */
  --red:#C8102E;
  --red-dark:#A80D26;

  /* two faces, and no third */
  --display:Khand,system-ui,sans-serif;   /* headings, buttons, labels */
  --body:Barlow,system-ui,sans-serif;     /* everything read in sentences */

  /* one measure, so pages do not change width as you move between them */
  --page:1180px;        /* content width */
  --gutter:28px;        /* side margin on a desktop */
  --gutter-tight:18px;  /* side margin on a phone */
  --page-read:1000px;   /* the narrower measure for pages that are mostly prose */
}