/*!
 * Proposed Icons v2.0.0 — base stylesheet
 * Load after (or alongside) proposed-icons.js. Sizes follow the surrounding
 * text (1em) so icons stay optically aligned at every font size.
 *
 * v2 palette: the icon geometry fills shapes through three CSS custom
 * properties (with hardcoded fallbacks baked into the SVG markup, so icons
 * still render correctly even if this stylesheet is missing):
 *
 *   --pi-cream  #f7f1e3  neutral bodies (pages, boxes, cards, chips)
 *   --pi-sage   #6b8f71  growth / positive / system accents
 *   --pi-blush  #d4a0a0  floral / warm / attention accents
 *
 * Outline ink is NOT a variable — it is currentColor, so it follows the
 * surrounding text color through hover, active-nav, and dark themes with
 * zero per-icon CSS.
 *
 * Dark themes: remap --pi-cream to a dim ink chip so cream bodies become
 * quiet dark chips with paper outlines. The block below covers the common
 * [data-theme="dark"] pattern used by Hub and BloomBooks; if your app uses
 * a different dark-state class/attribute (e.g. .dark, [data-bs-theme]),
 * copy the remap into your own stylesheet with your selector.
 */

/* Icon box: 1em square, optically centered on the text baseline. */
.p-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex: none;               /* keep icon size inside flex nav rows */
}

/* The SVG itself. Two cases:
   1. svg.p-icon placed directly by icon()/innerHTML -> sized by the .p-icon
      rule above (1em).
   2. svg nested inside a hydrated [data-icon] span -> fill the 1em box. */
.p-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Palette defaults (geometry also carries these as fallbacks). */
:root {
  --pi-cream: #f7f1e3;
  --pi-sage: #6b8f71;
  --pi-blush: #d4a0a0;
}

/* Dark theme: cream bodies -> dim navy ink chips; sage/blush stay (they
   read on both light and dark). CurrentColor ink flips automatically. */
[data-theme="dark"] {
  --pi-cream: #2b3757;
}

/* Optional size variants for non-text contexts (tiles, empty states). */
.p-icon--lg  { width: 1.5em;  height: 1.5em;  }
.p-icon--xl  { width: 2.5em;  height: 2.5em;  }

/* Buttons that contain only an icon keep an invisible hit area >=44px
   via their own padding; icons never grow the tap target smaller. */
button .p-icon,
a .p-icon {
  pointer-events: none;     /* clicks always land on the control itself */
}