:root {
  /* colors */
  --color-white: white;
  --color-gray: #444444;
  --color-light-gray: #b9b9b9;
  --color-green: #0e8857;
  --color-pink: #ef95b2;
  --color-red: #ef4444;
  --color-raspberry: #c2185b;
  --color-blue: blue;
  --color-black: black;
  /* app styles */
  --border-radius: none;
  --gap-xsmall: 3px;
  --gap-small: 5px;
  --gap-medium: 10px;
  --gap-large: 20px;
  --gap-xlarge: 50px;

  /* layout */
  --content-max-width: 720px;
  --content-padding: var(--gap-medium);

  /* type scale */
  --font-size-small: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.6rem;

  --tag-line-height: 1.1;
  --filter-input-line-height: 1.5rem;
  --filter-icon-size: var(--filter-input-line-height);

  /* Favorite heart masks (Phosphor): used with mask-image + background-color so
     the heart inherits a theme colour. Outline marks "followable", fill marks
     "followed" — see .fav-heart in events.css. */
  --heart-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z'/%3E%3C/svg%3E");
  --heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,228.66,16,172,16,102A62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z'/%3E%3C/svg%3E");
}