/*
  VōxSōma Hairline Icon System · v1
  2026-05-08

  Usage:
    <svg class="vs-icon" aria-hidden="true"><use href="/vs-icons.svg#moon"/></svg>
    <svg class="vs-icon vs-icon-lg"><use href="/vs-icons.svg#headphones"/></svg>
    <svg class="vs-icon vs-icon-amber"><use href="/vs-icons.svg#sparkle"/></svg>

  Inherits color from parent text via currentColor.
  Default size: 1em (matches surrounding font-size).
*/

.vs-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
  pointer-events: none;
  /* prevents accidental selection on touch */
  -webkit-user-select: none;
  user-select: none;
}

/* Size variants */
.vs-icon-sm { width: 0.85em; height: 0.85em; vertical-align: -0.1em; }
.vs-icon-md { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.vs-icon-lg { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }
.vs-icon-xl { width: 2em; height: 2em; vertical-align: -0.4em; }

/* Color variants — inherit by default, override when needed */
.vs-icon-amber { color: #B8845A; }
.vs-icon-bottle { color: #594433; }
.vs-icon-ink { color: #0B0908; }
.vs-icon-paper { color: #FFFDF7; }
.vs-icon-quiet { color: rgba(89, 68, 51, 0.55); }

/* Decorative wrapper for hero/featured contexts */
.vs-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  border: 1px solid rgba(89, 68, 51, 0.2);
  background: rgba(89, 68, 51, 0.04);
}
.vs-icon-circle .vs-icon { width: 1.2em; height: 1.2em; vertical-align: 0; }