/* Harmonicons theming contract (see Icons.cs).
   Each glyph draws its outline with `currentColor` (inherited from the call site — the theme foreground,
   or a muted/semantic colour the call site sets) and its fills with --color0..3. By default the fills are
   a soft neutral-gray primary with a brand-orange (#F59E0B, from the app icon) secondary highlight,
   giving the set a restrained two-tone look with a warm accent.
   The variants below flip the fills to follow a semantic or active colour, so a red icon reads red
   (not purple). Global (not scoped) so the class works across every component. */
.hicon {
    flex: 0 0 auto;
    vertical-align: middle;
    --color0: color-mix(in srgb, var(--cp-iconfill, var(--cp-muted, #9aa0aa)) 42%, transparent); /* neutral gray — primary fill */
    --color1: color-mix(in srgb, var(--cp-iconaccent, #F59E0B) 34%, transparent); /* brand orange — secondary highlight */
    --color2: var(--cp-error, #dc2626);
    --color3: var(--cp-result, #16a34a);
}

/* Monochrome: outline and fills all follow currentColor. Toasts use this (they set the semantic colour
   via --nt-c), as does anywhere a single-colour glyph reads better than the tinted two-tone. */
.hicon--mono {
    --color0: color-mix(in srgb, currentColor 16%, transparent);
    --color1: color-mix(in srgb, currentColor 8%, transparent);
    --color2: currentColor;
    --color3: currentColor;
}

/* Active/toggled state — e.g. a pinned pin, which the call site colours red: the fills follow the icon's
   own colour so the whole glyph reads in that colour instead of the brand tint. */
.hicon--on {
    --color0: color-mix(in srgb, currentColor 40%, transparent);
    --color1: color-mix(in srgb, currentColor 22%, transparent);
}

/* Semantic colours — outline AND fills move to the same family, so the tint matches the meaning. */
.hicon--success {
    color: var(--cp-result, #16a34a);
    --color0: color-mix(in srgb, var(--cp-result, #16a34a) 30%, transparent);
    --color1: color-mix(in srgb, var(--cp-result, #16a34a) 16%, transparent);
}
.hicon--danger {
    color: var(--cp-error, #dc2626);
    --color0: color-mix(in srgb, var(--cp-error, #dc2626) 30%, transparent);
    --color1: color-mix(in srgb, var(--cp-error, #dc2626) 16%, transparent);
}
.hicon--warning {
    color: var(--cp-warn, #f59e0b);
    --color0: color-mix(in srgb, var(--cp-warn, #f59e0b) 30%, transparent);
    --color1: color-mix(in srgb, var(--cp-warn, #f59e0b) 16%, transparent);
}