/* Lush Kingdom — icon treatment
   The system ships no icons of its own, deliberately. Use Lucide (MIT, open source,
   1800+ icons) and hold it to the brand's line weight so icons read as hairlines,
   the same language as the system's borders.

   Install, either way:
   1. CDN     <script src="https://unpkg.com/lucide@latest"></script> then lucide.createIcons();
   2. Self-host  download lucide-static, drop the SVGs in assets/icons/ and inline them.

   Markup:  <i class="lk-icon" data-lucide="shopping-bag"></i>
            <i class="lk-icon lk-icon--lg" data-lucide="x"></i>

   Core set for a shop: shopping-bag, x, chevron-down, chevron-right, menu, search,
   user, heart, plus, minus, check, arrow-right, instagram, truck, package. */

.lk-icon,
.lk-icon svg,
svg.lk-icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}

.lk-icon svg,
svg.lk-icon {
  stroke: currentColor;
  stroke-width: 1.5;          /* Lucide ships 2; 1.5 matches the system's hairlines */
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.lk-icon--sm, .lk-icon--sm svg { width: 16px; height: 16px; }
.lk-icon--lg, .lk-icon--lg svg { width: 24px; height: 24px; }
.lk-icon--xl, .lk-icon--xl svg { width: 32px; height: 32px; stroke-width: 1.25; }

/* Icon sitting next to a mono label — the common case in nav and buttons */
.lk-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, 'Spline Sans Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-muted, inherit);
}
.lk-icon-label:hover { color: var(--text, inherit); }

/* Icon-only control: a 44px hit target with no visible box until hover */
.lk-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--text, inherit);
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lk-icon-button:hover { border-color: var(--border, rgba(11, 74, 66, 0.16)); }
.lk-icon-button:active { transform: scale(0.97); }

/* Never do this: fills, two-tone icons, or an icon larger than the type it labels.
   Brass is not an icon colour — Brass is a surface treatment on dark grounds only. */