/* ═══════════════════════════════════════════════════════════════════
   TheRobotInsider — Unified Icon Library
   Batch 4 task 5.4: central Lucide-style icon system.

   All icons are inline <svg> in markup (no icon font, no sprite), driven
   by the shared .tri-icon-svg base class plus size/colour modifiers.

   Usage in PHP:
     <svg class="tri-icon-svg" aria-hidden="true" viewBox="0 0 24 24"
          fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round">
         <path d="..."/>
     </svg>

   Size variants:
     .tri-icon-svg    → 20×20 (default)
     .tri-icon-svg-sm → 16×16
     .tri-icon-svg-lg → 24×24
     .tri-icon-svg-xl → 32×32
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────── */
.tri-icon-svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* ── Size modifiers ──────────────────────────────────────────── */
.tri-icon-svg-sm { width: 16px; height: 16px; }
.tri-icon-svg-lg { width: 24px; height: 24px; }
.tri-icon-svg-xl { width: 32px; height: 32px; }
.tri-icon-svg-2x { width: 40px; height: 40px; }

/* ── Colour modifiers ────────────────────────────────────────── */
.tri-icon-accent { color: var(--accent); }
.tri-icon-muted  { color: var(--text-muted); }
.tri-icon-success { color: var(--success); }
.tri-icon-danger  { color: var(--danger); }
.tri-icon-warning { color: var(--warning); }

/* ── Stroke width overrides ──────────────────────────────────── */
.tri-icon-bold { stroke-width: 2.5; }
.tri-icon-thin { stroke-width: 1.5; }

/* ── Icon container helpers ──────────────────────────────────── */
.tri-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--accent-light);
    color: var(--accent);
    flex-shrink: 0;
}
.tri-icon-box .tri-icon-svg { width: 20px; height: 20px; }

.tri-icon-box-lg {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
}
.tri-icon-box-lg .tri-icon-svg { width: 28px; height: 28px; }

[data-theme="dark"] .tri-icon-box {
    background: var(--accent-light);
    color: var(--accent);
}

/* ── Inherit colour on hover (for links/buttons) ─────────────── */
a:hover .tri-icon-svg,
button:hover .tri-icon-svg,
.tri-btn:hover .tri-icon-svg {
    color: currentColor;
}

/* ── Lucide icon CSS-class library (optional convenience)
   Use: <i class="tri-lucide tri-lucide-shopping-cart"></i> + ::before with svg mask
   For now we keep all icons as inline <svg> to avoid masking/font dep. ── */
.tri-lucide {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
}