:root {

  /* Surfaces ------------------------------------------------------- */

  --page: #121212;

  /* Raised panels: service cards, the "Our Work" block, news blocks.
     Pure black, sitting on the page grey. Drawn with a 20px radius in
     the design. */
  --surface-panel: #000000;


  /* Light panels: the "About us" block. Pure white on the page grey, drawn
     with the same 20px radius as the black panels. The site is otherwise
     dark, so this is the exception rather than a second theme - anything
     placed on it has to opt into the inverted ink below. */
  --surface-panel-invert: #ffffff;

  /* Default type on the dark surfaces. */
  --foreground: #ffffff;
  --ink-muted: rgba(255, 255, 255, 0.6);
  --borderOnBlack: #ffffff1f;

  /* Ink for the light panels. --ink-invert-muted is the 50% black the
     designs use for body copy there; --ink-invert is the solid black the
     headings use. Note the muted value is a COLOUR, not opacity, for the
     same reason --ink-muted is: it must not fade child links or icons
     along with the text. */
  --ink-invert: #000000;
  --ink-invert-muted: rgba(0, 0, 0, 0.5);
  --ink-subtle: rgba(255, 255, 255, 0.7);
  


  /* Icons ---------------------------------------------------------- */

  --icon-color: var(--foreground);
}