/* ═══════════════════════════════════════════════════════════════════════════
   Icon System — Tier 2: DUOTONE (decorative)
   ---------------------------------------------------------------------------
   Companion to icons.css (Tier 1 = single-color outline/UI mask icons).
   This file is ADDITIVE and OPT-IN. It NEVER overrides the .icon-* mask
   system in icons.css — it only introduces new, independent classes.

   ── Concept ────────────────────────────────────────────────────────────────
   A duotone icon renders the SAME source glyph twice, stacked:
     • a low-opacity FILL layer  → painted with --duo-secondary (the "tint")
     • a full-opacity ACCENT layer → painted with --duo-primary   (the "line")
   Because both layers reuse the existing icon SVGs (via mask-image), any
   .icon-<name> shape can become duotone with zero new assets.

   ── How to apply the shape ──────────────────────────────────────────────────
   The wrapper needs to know WHICH glyph to draw. Two supported ways:

     1) Shape class (simplest — reuses the icon name):
        <span class="icon-duo icon-duo--md" style="--duo-mask:url(/static/img/icons/bat.svg)"></span>

     2) Data-driven mask (recommended for templated/data output):
        <span class="icon-duo icon-duo--lg" data-icon="bat"></span>
        …paired with an inline custom property set by the template, e.g.
        <span class="icon-duo" style="--duo-mask:url(/static/img/icons/wolf.svg)"></span>

     Both layers read --duo-mask, so a single declaration drives the whole icon.

   ── How to apply DATA-DRIVEN colors ─────────────────────────────────────────
   Colors are pure custom properties, so a template can inject them inline
   from any data source (rarity, faction, event, item color …):

        <span class="icon-duo icon-duo--lg"
              style="--duo-mask:url(/static/img/icons/gem.svg);
                     --duo-primary:var(--color-legendary);
                     --duo-secondary:color-mix(in srgb,var(--color-legendary) 45%,transparent)">
        </span>

   Or lean on the built-in tint modifiers below:
        .icon-duo--vampire   → red faction duotone
        .icon-duo--werewolf  → green faction duotone
        .icon-duo--gold      → gold economy duotone
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Duotone wrapper ───────────────────────────────────────────────────────
   Token-driven. Defaults follow the active accent so it themes per-race /
   per-event automatically (via --color-accent overrides in variables.css). */
.icon-duo {
  /* Public API tokens (override inline or via modifier classes) */
  --duo-primary:   var(--color-accent);
  --duo-secondary: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --duo-fill-opacity: 1;      /* secondary layer already carries alpha via color-mix */
  --duo-mask: none;           /* set by template: url(/static/img/icons/<name>.svg) */
  --duo-size: 1.5em;          /* overridden by size utilities below */

  position: relative;
  display: inline-block;
  width: var(--duo-size);
  height: var(--duo-size);
  vertical-align: -0.15em;    /* matches .icon baseline in icons.css */
  flex-shrink: 0;
  isolation: isolate;         /* keep stacked layers self-contained */
}

/* Shared geometry for both stacked layers */
.icon-duo::before,
.icon-duo::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--duo-mask);
          mask-image: var(--duo-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Low-opacity FILL (tint) — sits behind */
.icon-duo::before {
  background-color: var(--duo-secondary);
  opacity: var(--duo-fill-opacity);
  z-index: 0;
}

/* Full-opacity ACCENT (line) — sits in front */
.icon-duo::after {
  background-color: var(--duo-primary);
  z-index: 1;
}

/* Optional subtle depth on hover — purely decorative, motion-safe below */
.icon-duo--interactive {
  transition: transform var(--dur-fast, 150ms) var(--ease-out-soft, ease);
}
.icon-duo--interactive:hover {
  transform: translateY(-1px) scale(1.04);
}

/* ── Size utilities ────────────────────────────────────────────────────────
   Mirror the em-based scale used by icons.css so duotone + outline icons sit
   at matching optical sizes inline with text. */
.icon-duo--sm { --duo-size: 1em;    }
.icon-duo--md { --duo-size: 1.5em;  }
.icon-duo--lg { --duo-size: 2em;    }
.icon-duo--xl { --duo-size: 3em;    }

/* ── Faction / economy tints ───────────────────────────────────────────────
   Explicit color pairs that do NOT depend on the active accent, so they stay
   on-brand regardless of the current race/event theme. */
.icon-duo--vampire {
  --duo-primary:   var(--color-vampire);
  --duo-secondary: color-mix(in srgb, var(--color-vampire) 42%, transparent);
}
.icon-duo--werewolf {
  --duo-primary:   var(--color-werewolf);
  --duo-secondary: color-mix(in srgb, var(--color-werewolf) 42%, transparent);
}
.icon-duo--gold {
  --duo-primary:   var(--color-gold);
  --duo-secondary: color-mix(in srgb, var(--color-gold) 45%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Icon UI normalization helpers
   ---------------------------------------------------------------------------
   Opt-in class that unifies the "optical size / stroke feel" across BOTH the
   Tier-1 mask icons (icons.css) and Tier-2 duotone icons. Apply alongside an
   .icon-* or .icon-duo element to guarantee consistent alignment/scale in
   buttons, chips, nav items, etc. It never changes the glyph — only its box
   and rhythm. Token-driven via optical-size custom props.
   ═══════════════════════════════════════════════════════════════════════════ */
.icon-ui {
  /* Optical sizing knobs (tune per context without touching each icon) */
  --icon-optical-size: 1.2em;   /* baseline glyph box, matches .icon default */
  --icon-optical-shift: -0.15em;/* vertical-align to center against cap height */

  display: inline-block;
  width: var(--icon-optical-size);
  height: var(--icon-optical-size);
  vertical-align: var(--icon-optical-shift);
  flex-shrink: 0;               /* never squish inside flex rows */
  line-height: 1;               /* neutralize inherited line-height */
}

/* When used on a duotone wrapper, drive the duotone size from the same knob
   so a single --icon-optical-size controls both tiers identically. */
.icon-duo.icon-ui { --duo-size: var(--icon-optical-size); }

/* Consistent gap when an icon leads text inside a flex container */
.icon-ui--lead { margin-right: 0.4em; }
.icon-ui--trail { margin-left: 0.4em; }

/* Matched optical sizes (parallel to icons.css size variants) */
.icon-ui--xs  { --icon-optical-size: 0.8em;  }
.icon-ui--sm  { --icon-optical-size: 1em;    }
.icon-ui--md  { --icon-optical-size: 1.2em;  }
.icon-ui--lg  { --icon-optical-size: 1.5em;  }
.icon-ui--xl  { --icon-optical-size: 2em;    }

/* ── Motion safety ─────────────────────────────────────────────────────────
   The only animation here is the optional hover lift; disable it when the
   user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .icon-duo--interactive {
    transition: none;
  }
  .icon-duo--interactive:hover {
    transform: none;
  }
}