/* ENOK Vanilla Utility Glyphs — D1
   Zero-dependency icon styling. CSP-safe. Icons carry no color of their own —
   they inherit `currentColor`, so they take the color of the text around them.

   Drop-in:
     <link rel="stylesheet" href="glyphs.css">
     <svg class="enok-glyph"><use href="glyphs.svg#enok-sync"/></svg>

   Or wrap an inline standalone icon:
     <span class="enok-glyph"><!-- paste icons/sync.svg here --></span>
*/

:root {
  /* Tune once, applies everywhere. */
  --enok-glyph-size: 24px;
  --enok-glyph-stroke: 1.75;   /* the D1 house stroke */
}

.enok-glyph {
  display: inline-block;
  width: var(--enok-glyph-size);
  height: var(--enok-glyph-size);
  color: inherit;              /* icons follow text color */
  vertical-align: middle;
  flex: none;
}

/* Applies whether .enok-glyph IS the <svg> or WRAPS one. */
svg.enok-glyph,
.enok-glyph > svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--enok-glyph-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size modifiers — set a variable, nothing else changes. */
.enok-glyph--sm { --enok-glyph-size: 18px; }
.enok-glyph--md { --enok-glyph-size: 24px; }
.enok-glyph--lg { --enok-glyph-size: 32px; }
.enok-glyph--xl { --enok-glyph-size: 48px; }

/* Optical weight — the whole set moves together. */
.enok-glyph--thin  { --enok-glyph-stroke: 1.25; }
.enok-glyph--bold  { --enok-glyph-stroke: 2.25; }

/* Muted state for inactive controls. */
.enok-glyph--muted { opacity: .55; }