: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");

  /* Saved-filter funnel (Phosphor funnel, Fill weight): the "this filter is saved"
     state of the events-page save control. The not-saved state is the outline
     ph-funnel glyph + a small "+" badge ("add this filter"); saved swaps to this
     solid funnel (masked + accent-painted, like the check mask) so the two states
     read as filled vs. outline at a glance, not by colour alone. Matches the nav
     "Filter" funnel so the save action and its destination share one metaphor. */
  --funnel-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53Z'/%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");
}