:root {
  /* colors */
  --color-white: white;
  --color-gray: #444444;
  --color-light-gray: #b9b9b9;
  --color-green: #0e8857;
  --color-pink: #ef95b2;
  --color-red: #ef4444;
  --color-amber: #d9930a;
  --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);

  /* Saved-show heart masks (Phosphor): used with mask-image + background-color so
     the heart inherits a theme colour (raspberry). Outline = not saved, fill =
     saved — see .save-heart / .day-saved-marker in events.css. (Interest/follow
     uses the --star-* masks below; the heart is reserved for the rarer "saved".) */
  --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");

  /* Checkmark (Phosphor check): paints the tick inside a checked filter-sheet
     option box via mask-image + background-color, so it inherits a theme colour. */
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");

  /* Interested / follow star (Phosphor star): outline = followable, fill =
     followed. The "interested" signal's own glyph — distinct in SHAPE from the
     saved heart so the two personal signals never rely on colour alone (both
     live in the raspberry family; heart = saved/powerful, star = interested/
     frequent-but-quieter). Masked like the heart so it inherits a theme colour. */
  --star-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M239.2,97.29a16,16,0,0,0-13.81-11L166,81.17,142.72,25.81h0a15.95,15.95,0,0,0-29.44,0L90.07,81.17,30.61,86.32a16,16,0,0,0-9.11,28.06L66.61,153.8,53.09,212.34a16,16,0,0,0,23.84,17.34l51-31,51.11,31a16,16,0,0,0,23.84-17.34l-13.51-58.6,45.1-39.36A16,16,0,0,0,239.2,97.29Zm-15.22,5-45.1,39.36a16,16,0,0,0-5.08,15.71L187.35,216v0l-51.07-31a15.9,15.9,0,0,0-16.54,0l-51,31h0L82.2,157.4a16,16,0,0,0-5.08-15.71L32,102.35a.37.37,0,0,1,0-.09l59.44-5.14a16,16,0,0,0,13.35-9.75L128,32.08l23.2,55.29a16,16,0,0,0,13.35,9.75L224,102.26S224,102.32,224,102.33Z'/%3E%3C/svg%3E");
  --star-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34l13.51-58.6L20.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0L164.93,81.17l59.46,5.15a16,16,0,0,1,9.11,28.06Z'/%3E%3C/svg%3E");

  /* Disclosure caret (Phosphor caret-down): the single dropdown/expand glyph.
     Painted via mask-image + background-color so it inherits currentColor /
     a theme token, replacing the old hard-coded-green select SVG and the
     Unicode ▾ in the nav menu. */
  --caret-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}