:root {
  --bg-color: #fff; /* prev: #f9f9f9 */
  --recessed-bg-color: #e3e3e3;
  --hover-bg-color: #e9e9e9;

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

  --primary-color: #005EF8;
  --muted-color: #999;
  --link-color: var(--color-bold);
  --link-bg-color: #eee;
  --link-hover-color: white;
  --link-hover-bg-color: var(--primary-color);
  --action-color: var(--primary-color); /* 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.55em;
  --line-height-heading: 1.25em;

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

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

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

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

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

  /*
    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.5rem;
}