:root {
  --bg-color: #f9f9f9;
  --recessed-bg-color: #e3e3e3;
  --hover-bg-color: #e9e9e9;

  --color: #000; /* body text */
  --color-bold: #000; /* headings and bold text */

  --primary-color: #005EF8;
  --muted-color: #999;
  --faint-color:  #ccc;

  --link-color: var(--primary-color);
  --link-bg-color: transparent;
  --link-hover-color: var(--primary-color);
  --link-hover-bg-color: var(--hover-bg-color);
  --ui-color: var(--color-bold); /* For buttons and other non-link controls */

  /* Misc colors */
  --green: #58df82;
  --yellow: #f6dc58; /* FDF5CF*/
  --orange: #fca469;
  --red: #fc6969;

  /* Body text line height */
  --line-height: 1.5em;
  --line-height-heading: 1.25em;

  /* Borders and corners */
  --border-color: #000;
  --border-color-light: #d5d5d5; /* Used for inline content  */

  --radius-sm: 3px; /* Small tags */
  --radius: 3px;    /* Form controls */
  --radius-lg: 3px; /* Media */
  --radius-xl: 3px; /* Large media */

  /* Typography */
  --font: 'Roboto Mono', Inter, sans-serif;
  --font-heading: 'Roboto Mono', Inter, sans-serif;
  --font-ui: 'Roboto Mono', Inter, sans-serif;

  --font-mono: Menlo, Consolas, Monaco, Lucida Console, monospace;
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-x-bold: 700;

  /* Forms */
  --form-control-height-xs: 2em;
  --form-control-height: 2em;

  /*
    Layout

    All px estimates of rem values assume 16px font-size.
  */
  --nav-width: 8.75rem; /* 140px */
  --gutter: 12px;
  --page-max-width: 40rem;
  /*--text-max-width: 35rem;*/

  --block-bottom: 1.4rem;
}