/* ==========================================================================
   Icon System
   --------------------------------------------------------------------------
   Replaces the old data-URI variable approach.
   Icons are now inline SVG symbols (see icons.svg).

   USAGE IN HTML:
     <svg class="icon"><use href="#icon-NAME"/></svg>

   COLOUR MODIFIERS (add alongside .icon):
     .icon--brand    → #0A1F7A
     .icon--white    → #fff
     (default is currentColor, inherits from parent)

   STROKE WEIGHT MODIFIERS:
     .icon--2px
     .icon--3px
     .icon--4px
     (default is 1px)

   CUSTOM COLOUR (inline or via CSS):
     style="color: #cc0000"
     .my-context .icon { color: hotpink; }

   HOVER / DARK MODE (free, no extra icons needed):
     .btn:hover .icon { color: white; }
     @media (prefers-color-scheme: dark) { body { color: white; } }

   EXAMPLES:
     <svg class="icon"><use href="#icon-hamburger-menu"/></svg>
     <svg class="icon icon--brand icon--2px"><use href="#icon-cross"/></svg>
     <svg class="icon" style="color:#cc0000"><use href="#icon-warning-triangle"/></svg>
   ========================================================================== */

.icon {
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  overflow: visible;
  flex-shrink: 0;
}

/* Colour modifiers */
.icon--brand {
  color: #0A1F7A;
}

.icon--white {
  color: #fff;
}

.icon--black {
  color: #000;
}

.icon--red {
  color: #cc0000;
}

.icon--amber {
  color: #F59E0B;
}

/* Stroke weight modifiers */
.icon--2px {
  stroke-width: 2;
}

.icon--3px {
  stroke-width: 3;
}

.icon--4px {
  stroke-width: 4;
}

/* Size modifiers (optional helpers) */
.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--lg {
  width: 32px;
  height: 32px;
}

.icon--xl {
  width: 48px;
  height: 48px;
}