:root {
  --bg-color: #fff;
  --recessed-bg-color: #f3f3f3;
  --hover-bg-color: #e9e9e9;

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

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

  --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 */

  --nav-color: var(--muted-color);
  --nav-hover-color: var(--color);

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

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

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

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

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

  --font-mono: 'Geist Mono', serif, Menlo, Consolas, Monaco, Lucida Console, monospace;
  --weight-regular: 400;
  --weight-semi-bold: 500;
  --weight-bold: 600;
  --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: 12rem; 
  --gutter: 24px;
  --gutter-inner: 12px;
  --page-max-width: 48rem;
  /*--text-max-width: 35rem;*/

  --block-bottom: 1.4rem;
}