/*
 * WA Accent Variant Extension
 * ============================
 *
 * Extends Web Awesome components to support `variant="accent"` alongside the
 * built-in brand / success / warning / danger / neutral variants.
 *
 * WA (v3.5) ships color-family tokens for five families. Many design systems
 * ship a sixth: an "accent" — a secondary brand color used for emphasis,
 * calls-to-action, and visual punctuation that shouldn't read as the primary
 * brand. This file makes WA components understand the accent variant so the
 * design system has parity with brand without forking WA.
 *
 * Approach
 * --------
 * WA's components fall into two style-target patterns:
 *
 *   - wa-button paints on its inner ::part(base) element (a real <button>
 *     inside the shadow DOM). Override there.
 *
 *   - wa-badge / wa-callout / wa-tag paint directly on the host element
 *     (their shadow DOM has no part="base" — only inner content wrappers
 *     like part="icon" / part="message"). Override the host directly.
 *
 * Both patterns map to --wa-color-accent-* tokens that the consumer
 * provides in the same shape WA emits for the built-in families:
 * -fill-loud, -on-loud, -fill-quiet, -on-quiet, -border-loud,
 * -border-normal, -border-quiet, plus the 11-step ladder -05 through -95.
 *
 * Intended for upstream contribution to Web Awesome. Until accepted, this
 * file lives in the consuming app's stylesheets and is loaded after WA's
 * main CSS.
 *
 * Coverage: wa-button (filled / outlined / filled-quiet / plain), wa-badge,
 * wa-callout, wa-tag. Hover/active states inherit WA's existing filter
 * adjustments — those compound naturally with the colors set here.
 */

/* ------------------------------------------------------------------ */
/* wa-button — paints on ::part(base) (inner <button>)                */
/* ------------------------------------------------------------------ */

wa-button[variant="accent"]::part(base) {
  background-color: var(--wa-color-accent-fill-loud);
  color: var(--wa-color-accent-on-loud);
  border-color: var(--wa-color-accent-fill-loud);
}

wa-button[variant="accent"][appearance="outlined"]::part(base) {
  background-color: transparent;
  color: var(--wa-color-accent-on-quiet);
  border-color: var(--wa-color-accent-fill-loud);
}

wa-button[variant="accent"][appearance="filled-quiet"]::part(base) {
  background-color: var(--wa-color-accent-fill-quiet);
  color: var(--wa-color-accent-on-quiet);
  border-color: transparent;
}

wa-button[variant="accent"][appearance="plain"]::part(base) {
  background-color: transparent;
  color: var(--wa-color-accent-on-quiet);
  border-color: transparent;
}

/* Focus ring uses the family's loud fill (mirrors WA's pattern for the
   other families when picked up via --wa-color-focus). */
wa-button[variant="accent"]:focus-visible::part(base) {
  outline-color: var(--wa-color-accent-fill-loud);
}

/* ------------------------------------------------------------------ */
/* wa-badge — paints on the host (default appearance is loud-style    */
/* via WA's reflected appearance="accent" attribute)                  */
/* ------------------------------------------------------------------ */

wa-badge[variant="accent"] {
  background-color: var(--wa-color-accent-fill-loud);
  color: var(--wa-color-accent-on-loud);
  border-color: transparent;
}

/* ------------------------------------------------------------------ */
/* wa-callout — paints on the host with a pale fill + soft border;    */
/* WA keeps the callout text in --wa-color-text-normal across variants*/
/* so contrast stays uniform on light backgrounds.                    */
/* ------------------------------------------------------------------ */

wa-callout[variant="accent"] {
  background-color: var(--wa-color-accent-fill-quiet);
  border-color: var(--wa-color-accent-border-quiet);
}

/* ------------------------------------------------------------------ */
/* wa-tag — paints on the host (container component, like badge)      */
/* ------------------------------------------------------------------ */

wa-tag[variant="accent"] {
  background-color: var(--wa-color-accent-fill-quiet);
  color: var(--wa-color-accent-on-quiet);
  border-color: var(--wa-color-accent-border-loud, var(--wa-color-accent-fill-loud));
}