/* ── Button demos ── */
    .btn-demo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--btn-gap);
      font-family: var(--font-family-base);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-tight);
      cursor: pointer;
      border: none;
      white-space: nowrap;
    }

    .btn-demo-xl { height: var(--size-xl); padding: 0 var(--btn-padding-xl); font-size: var(--btn-font-xl); border-radius: var(--btn-radius); }
    .btn-demo-lg { height: var(--size-lg); padding: 0 var(--btn-padding-lg); font-size: var(--btn-font-lg); border-radius: var(--radius-md); }
    .btn-demo-md { height: var(--size-md); padding: 0 var(--btn-padding-md); font-size: var(--btn-font-md); border-radius: var(--radius-md); }
    .btn-demo-sm { height: var(--size-sm); padding: 0 var(--btn-padding-sm); font-size: var(--btn-font-sm); border-radius: var(--radius-md); }

    .btn-demo-primary  { background: var(--color-primary); color: var(--color-text-on-primary); border: var(--btn-border) solid transparent; }
    .btn-demo-outline  { background: transparent; color: var(--color-text-heading); border: var(--btn-border) solid var(--color-text-heading); }
    .btn-demo-outline-dark { background: transparent; color: var(--color-warm-soft); border: var(--btn-border) solid var(--color-warm-soft); }
    .btn-demo-ghost    { background: transparent; color: var(--color-text-heading); border: var(--btn-border) solid transparent; }
    .btn-demo-ghost-dark { background: transparent; color: var(--color-warm-soft); border: var(--btn-border) solid transparent; }
    .btn-demo-disabled { background: transparent; color: var(--color-text-disabled); border: var(--btn-border) solid var(--color-border); cursor: not-allowed; }
    .btn-demo-disabled-dark { background: transparent; color: var(--color-text-disabled); border: var(--btn-border) solid var(--color-border-disabled-dark); cursor: not-allowed; }

    /* Icon alignment inside buttons */
    .btn-demo i.fi { display: inline-flex; align-items: center; line-height: 0; }

    /* IconButton — small size (icon 16px) */
    .btn-icon-bare-sm {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--color-text-heading);
      cursor: pointer;
      padding: var(--space-2);
      border-radius: var(--radius-md);
    }
    .btn-icon-bare-sm i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }
    .btn-icon-bare-dark-sm {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--color-warm-soft);
      cursor: pointer;
      padding: var(--space-2);
      border-radius: var(--radius-md);
    }
    .btn-icon-bare-dark-sm i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }
    .btn-icon-bare-disabled-sm {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--color-text-disabled);
      cursor: not-allowed;
      padding: var(--space-2);
      border-radius: var(--radius-md);
    }
    .btn-icon-bare-disabled-sm i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }

        .btn-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-full);
      font-family: var(--font-family-base);
      font-size: var(--btn-font-md);
      font-weight: var(--font-weight-bold);
      letter-spacing: var(--letter-spacing-tight);
      text-transform: uppercase;
      cursor: pointer;
      border: var(--border-width-default) solid transparent;
      line-height: normal;
      height: var(--size-sm);
    }

    .btn-chip-selected   { background: var(--color-surface-inverse); color: var(--color-text-on-dark); border-color: transparent; }
    .btn-chip-default    { background: transparent; color: var(--color-text-accent); border-color: var(--color-border-strong); }
    .btn-demo:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }
    .btn-chip:focus-visible  { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset-compact); }

    /* Icon button — ícone solto, sem container */
    .btn-icon-bare {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--color-text-heading);
      cursor: pointer;
      padding: var(--space-2);
      border-radius: var(--radius-md);
    }

    /* Button-icon — filled com ícone (sem texto) */
    .btn-icon-filled {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--btn-buttonicon-lg);
      height: var(--btn-buttonicon-lg);
      flex-shrink: 0;
      background: var(--color-primary);
      border: none;
      color: var(--color-text-on-primary);
      cursor: pointer;
      border-radius: var(--radius-lg);
    }
    .btn-icon-filled i.fi {
      font-size: var(--icon-sm);   /* 16px — centrado visualmente em 48×48 */
      display: inline-flex; align-items: center; line-height: 0;
    }

    /* ButtonIcon — dark context (outline accent) */
    .btn-icon-filled-dark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--btn-buttonicon-lg);
      height: var(--btn-buttonicon-lg);
      flex-shrink: 0;
      background: transparent;
      border: var(--btn-border) solid var(--color-warm-soft);
      color: var(--color-warm-soft);
      cursor: pointer;
      border-radius: var(--radius-lg);
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-icon-filled-dark:not(:disabled):hover { border-radius: var(--radius-md); }
    .btn-icon-filled-dark:disabled { color: var(--color-text-disabled); border-color: var(--color-border-disabled-dark); cursor: not-allowed; }
    .btn-icon-filled-dark i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }

    /* ButtonIcon — medium size (36×36px) */
    .btn-icon-filled-md {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--btn-buttonicon-md);
      height: var(--btn-buttonicon-md);
      flex-shrink: 0;
      background: var(--color-primary);
      border: none;
      color: var(--color-text-on-primary);
      cursor: pointer;
      border-radius: var(--radius-md);
    }
    .btn-icon-filled-md i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }

    /* ButtonIcon medium — dark context */
    .btn-icon-filled-dark-md {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--btn-buttonicon-md);
      height: var(--btn-buttonicon-md);
      flex-shrink: 0;
      background: transparent;
      border: var(--btn-border) solid var(--color-warm-soft);
      color: var(--color-warm-soft);
      cursor: pointer;
      border-radius: var(--radius-md);
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-icon-filled-dark-md:not(:disabled):hover { border-radius: var(--radius-sm); }
    .btn-icon-filled-dark-md:disabled { color: var(--color-text-disabled); border-color: var(--color-border-disabled-dark); cursor: not-allowed; }
    .btn-icon-filled-dark-md i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }

        /* Icon button — dark context */
    .btn-icon-bare-dark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--color-warm-soft);
      cursor: pointer;
      padding: var(--space-2);
      border-radius: var(--radius-md);
    }

    /* Primary dark — fundo primary, CTA em accent */
    .btn-demo-primary-dark { background: var(--color-primary); color: var(--color-text-on-primary); border: var(--btn-border) solid transparent; }

    /* Disabled states for icon buttons */
    .btn-icon-bare-disabled {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--color-text-disabled);
      cursor: not-allowed;
      padding: var(--space-2);
      border-radius: var(--radius-md);
    }

    /* Ghost hover simulation — color shift to primary-400, no radius change */
    .btn-demo-ghost-hover { background: transparent; color: var(--palette-primary-400); border: var(--btn-border) solid transparent; }
    .btn-demo-ghost-pressed { background: transparent; color: var(--color-text-heading); border: var(--btn-border) solid transparent; opacity:0.9; }

    /* Outline hover/pressed simulation */
    .btn-demo-outline-hover { background: transparent; color: var(--color-text-heading); border: var(--btn-border) solid var(--color-text-heading); }
    .btn-demo-outline-pressed { background: transparent; color: var(--color-text-heading); border: var(--btn-border) solid var(--color-text-heading); }

    /* Chip states */
    .btn-chip-disabled { background: transparent; color: var(--color-text-disabled); border-color: var(--color-border); cursor: not-allowed; }
    .btn-chip-lg.btn-chip-disabled { background: transparent; color: var(--color-text-disabled); border-color: var(--color-border); cursor: not-allowed; }

    /* ButtonIcon — outline dark (accent border) */
    .btn-icon-outline-dark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--btn-buttonicon-lg);
      height: var(--btn-buttonicon-lg);
      flex-shrink: 0;
      background: transparent;
      border: var(--btn-border) solid var(--color-warm-soft);
      color: var(--color-warm-soft);
      cursor: pointer;
      border-radius: var(--radius-lg);
    }
    .btn-icon-outline-dark i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }

    /* Interactive button demo — new states v1.5.2
     *
     * Gradient flash: an asymmetric brand-300 shimmer band in a 500%-wide gradient (subtler vs brand-200).
     * Leading edge (enters first): short crispy fade — 15% of gradient.
     * Trailing edge (exits last): long gentle fade — 41% of gradient.
     * Band occupies gradient 22%→78%; viewport is 20% wide.
     * Default bg-position: 100% → viewport sees [80%,100%] = pure brand.
     * Animation end: 0% → viewport sees [0%,20%] = pure brand.
     * The band fully clears both ends with 2% safety margin.
     *
     * Radius: lg(16px) → md(8px) on hover at 800ms (easing-expressive).
     * Return: 400ms (duration-slow = 50% faster).
     *
     * Pressed: immediate brand-400.
     */
    @keyframes gradient-flash {
      from { background-position: 100% 0; }
      to   { background-position: 0% 0; }
    }
    .btn-interactive {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--btn-gap);
      height: var(--size-xl);
      padding: 0 var(--btn-padding-xl);
      font-family: var(--font-family-base);
      font-size: var(--btn-font-xl);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-tight);
      cursor: pointer;
      border: var(--btn-border) solid transparent;
      border-radius: var(--radius-lg);
      background-image: linear-gradient(to right,
        var(--color-primary) 0%,
        var(--color-primary) 22%,
        var(--palette-brand-300) 63%,
        var(--color-primary) 78%,
        var(--color-primary) 100%
      );
      background-size: 500% 100%;
      background-position: 100% 0;
      color: var(--color-text-on-primary);
      white-space: nowrap;
      /* Return from hover: radius at 400ms (50% faster than entry) */
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive i.fi { display: inline-flex; align-items: center; line-height: 0; }
    .btn-interactive:hover {
      border-radius: var(--radius-md);
      /* Entry: radius at 800ms, gradient flash at 800ms */
      transition: border-radius var(--motion-duration-expressive) var(--motion-easing-expressive);
      animation: gradient-flash var(--motion-duration-expressive) var(--motion-easing-expressive) 1;
    }
    .btn-interactive:active {
      background-image: none;
      background-color: var(--color-primary-hover);
      border-radius: var(--radius-md);
      animation: none;
      transition: none;
    }
    .btn-interactive:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }
    .btn-interactive:disabled {
      background-image: none; background-color: transparent;
      color: var(--color-text-disabled); border: var(--btn-border) solid var(--color-border);
      cursor: not-allowed; border-radius: var(--btn-radius); animation: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .btn-interactive, .btn-interactive:hover { transition: none; animation: none; }
    }

    /* Interactive Outline — radius morph + state-hover bg, no gradient */
    .btn-interactive-outline {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--btn-gap); height: var(--size-xl); padding: 0 var(--btn-padding-xl);
      font-family: var(--font-family-base); font-size: var(--btn-font-xl); font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-tight); cursor: pointer; white-space: nowrap;
      background: transparent; color: var(--color-text-heading);
      border: var(--btn-border) solid var(--color-text-heading); border-radius: var(--btn-radius);
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-outline i.fi { display: inline-flex; align-items: center; line-height: 0; }
    .btn-interactive-outline:hover {
      border-radius: var(--radius-md);
      transition: border-radius var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-outline:active { border-radius: var(--radius-md); transition: none; }
    .btn-interactive-outline:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }
    .btn-interactive-outline:disabled {
      background: transparent; color: var(--color-text-disabled);
      border-color: var(--color-border); cursor: not-allowed; border-radius: var(--btn-radius);
    }

    /* Interactive Ghost — color shift on hover (brand-500→accent-300), no radius morph, no gradient */
    .btn-interactive-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--btn-gap); height: var(--size-xl); padding: 0 var(--btn-padding-xl);
      font-family: var(--font-family-base); font-size: var(--btn-font-xl); font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-tight); cursor: pointer; white-space: nowrap;
      background: transparent; color: var(--color-text-heading);
      border: var(--btn-border) solid transparent; border-radius: var(--btn-radius);
      transition: color var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-ghost i.fi { display: inline-flex; align-items: center; line-height: 0; }
    .btn-interactive-ghost:hover {
      color: var(--palette-primary-400);
      transition: color var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-ghost:active { color: var(--color-text-heading); transition: none; }
    .btn-interactive-ghost:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }
    .btn-interactive-ghost:disabled {
      background: transparent; color: var(--color-text-disabled);
      border-color: var(--color-border); cursor: not-allowed; border-radius: var(--btn-radius);
    }

    /* Interactive Outline Dark — radius morph on dark bg */
    .btn-interactive-outline-dark {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--btn-gap); height: var(--size-xl); padding: 0 var(--btn-padding-xl);
      background: transparent; color: var(--color-warm-soft);
      border: var(--btn-border) solid var(--color-warm-soft); border-radius: var(--btn-radius);
      font-family: var(--font-family-base); font-size: var(--btn-font-lg); font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-tight); cursor: pointer;
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-expressive), color var(--motion-duration-slow) var(--motion-easing-expressive), border-color var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-outline-dark i.fi { display: inline-flex; align-items: center; line-height: 0; }
    .btn-interactive-outline-dark:hover {
      border-radius: var(--radius-md);
      color: var(--color-text-on-dark);
      border-color: var(--color-text-on-dark);
      transition: border-radius var(--motion-duration-expressive) var(--motion-easing-expressive), color var(--motion-duration-expressive) var(--motion-easing-expressive), border-color var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-outline-dark:active { border-radius: var(--radius-md); color: var(--color-warm-soft); border-color: var(--color-warm-soft); transition: none; }
    .btn-interactive-outline-dark:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }
    .btn-interactive-outline-dark:disabled {
      background: transparent; color: var(--color-text-disabled);
      border-color: var(--color-border-disabled-dark); cursor: not-allowed; border-radius: var(--radius-lg);
    }

    /* Interactive Ghost Dark — opacity shift on hover */
    .btn-interactive-ghost-dark {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--btn-gap); height: var(--size-xl); padding: 0 var(--btn-padding-xl);
      background: transparent; color: var(--color-warm-soft);
      border: var(--btn-border) solid transparent; border-radius: var(--btn-radius);
      font-family: var(--font-family-base); font-size: var(--btn-font-lg); font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-tight); cursor: pointer;
      transition: color var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-ghost-dark i.fi { display: inline-flex; align-items: center; line-height: 0; }
    .btn-interactive-ghost-dark:hover {
      color: var(--color-text-on-dark);
      transition: color var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-ghost-dark:active { color: var(--color-warm-soft); transition: none; }
    .btn-interactive-ghost-dark:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }
    .btn-interactive-ghost-dark:disabled {
      background: transparent; color: var(--color-text-disabled);
      border-color: transparent; cursor: not-allowed;
    }

    /* Interactive Chip — radius morph pill→md on hover, color shift on pressed */
    .btn-interactive-chip {
      display: inline-flex; align-items: center; justify-content: center;
      padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
      font-family: var(--font-family-base); font-size: var(--btn-font-md); font-weight: var(--font-weight-bold);
      letter-spacing: var(--letter-spacing-tight); text-transform: uppercase; cursor: pointer;
      border: var(--border-width-default) solid var(--color-border-strong); line-height: normal;
      background: transparent; color: var(--color-text-accent);
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-decelerate);
    }
    .btn-interactive-chip:hover {
      border-radius: var(--radius-md);
      transition: none;
    }
    .btn-interactive-chip:active { color: var(--palette-primary-500); border-radius: var(--radius-md); transition: none; }
    .btn-interactive-chip:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset-compact); }
    .btn-interactive-chip:disabled {
      background: transparent; color: var(--color-text-disabled);
      border-color: var(--color-border); cursor: not-allowed; border-radius: var(--radius-full);
    }
    .btn-interactive-chip.btn-chip-selected {
      background: var(--color-surface-inverse);
      color: var(--color-text-on-dark);
      border-color: transparent;
    }
    .btn-interactive-chip-lg {
      display: inline-flex; align-items: center; justify-content: center;
      padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
      font-family: var(--font-family-base); font-size: var(--btn-font-md); font-weight: var(--font-weight-bold);
      letter-spacing: var(--letter-spacing-tight); text-transform: uppercase; cursor: pointer;
      border: var(--border-width-default) solid var(--color-border-strong); line-height: normal;
      background: transparent; color: var(--color-text-accent);
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-decelerate);
    }
    .btn-interactive-chip-lg:hover {
      border-radius: var(--radius-md);
      transition: none;
    }
    .btn-interactive-chip-lg:active { color: var(--palette-primary-500); border-radius: var(--radius-md); transition: none; }
    .btn-interactive-chip-lg:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset-compact); }
    .btn-interactive-chip-lg:disabled {
      background: transparent; color: var(--color-text-disabled);
      border-color: var(--color-border); cursor: not-allowed; border-radius: var(--radius-full);
    }
    .btn-interactive-chip-lg.btn-chip-selected {
      background: var(--color-surface-inverse);
      color: var(--color-text-on-dark);
      border-color: transparent;
    }

    /* Chip — dark context (mesmas props visuais que light, só cores diferem) */
    .btn-chip-dark-default {
      display: inline-flex; align-items: center; justify-content: center;
      padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
      font-family: var(--font-family-base); font-size: var(--btn-font-md); font-weight: var(--font-weight-bold);
      text-transform: uppercase; letter-spacing: var(--letter-spacing-tight);
      background: transparent; color: var(--color-warm-soft);
      border: var(--border-width-default) solid var(--color-warm-soft);
      cursor: pointer; height: var(--size-sm); line-height: normal;
    }
    .btn-chip-dark-selected {
      display: inline-flex; align-items: center; justify-content: center;
      padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
      font-family: var(--font-family-base); font-size: var(--btn-font-md); font-weight: var(--font-weight-bold);
      text-transform: uppercase; letter-spacing: var(--letter-spacing-tight);
      background: var(--color-warm-soft); color: var(--color-surface-inverse);
      border: var(--border-width-default) solid transparent;
      cursor: pointer; height: var(--size-sm); line-height: normal;
    }
    .btn-chip-dark-default.btn-chip-lg-dark {
      padding: var(--space-2) var(--space-4); font-size: var(--btn-font-md);
      height: var(--size-xl);
    }
    .btn-chip-dark-selected.btn-chip-lg-dark {
      padding: var(--space-2) var(--space-4); font-size: var(--btn-font-md);
      height: var(--size-xl);
    }
    .btn-chip-dark-disabled {
      display: inline-flex; align-items: center; justify-content: center;
      padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
      font-family: var(--font-family-base); font-size: var(--btn-font-md); font-weight: var(--font-weight-bold);
      text-transform: uppercase; letter-spacing: var(--letter-spacing-tight);
      background: transparent; color: var(--color-text-disabled);
      border: var(--border-width-default) solid var(--color-border-disabled-dark);
      cursor: not-allowed; height: var(--size-sm); line-height: normal;
    }

    /* Interactive Chip — dark context */
    .btn-interactive-chip-dark {
      display: inline-flex; align-items: center; justify-content: center;
      padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
      font-family: var(--font-family-base); font-size: var(--btn-font-md); font-weight: var(--font-weight-bold);
      text-transform: uppercase; letter-spacing: var(--letter-spacing-tight);
      background: transparent; color: var(--color-warm-soft);
      border: var(--border-width-default) solid var(--color-warm-soft);
      cursor: pointer; height: var(--size-sm); line-height: normal;
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-decelerate);
    }
    .btn-interactive-chip-dark:hover { border-radius: var(--radius-md); transition: none; }
    .btn-interactive-chip-dark:active { color: var(--color-warm-soft); }
    .btn-interactive-chip-dark:focus-visible {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact);
    }
    .btn-interactive-chip-dark:disabled {
      background: transparent; color: var(--color-text-disabled);
      border-color: var(--color-border-disabled-dark); cursor: not-allowed; border-radius: var(--radius-full);
    }
    .btn-interactive-chip-dark.btn-chip-dark-selected {
      background: var(--color-warm-soft);
      color: var(--color-surface-inverse);
      border-color: transparent;
    }

    /* Chip Dismissible — compacto com ícone trailing de fechar.
     * Hover chip: mesmo padrão do btn-interactive-chip (radius-full → radius-md, snap instantâneo).
     * Padding: simétrico (10px/10px). dismiss-btn usa margin-right: -4px para ficar
     *   opticamente próximo à borda direita sem introduzir assimetria visual.
     * Disabled: × removido (display:none) → padding simétrico natural.
     */
    .btn-chip-dismissible {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 0 10px;
      border-radius: var(--radius-full);
      font-family: var(--font-family-base); font-size: var(--btn-font-md); font-weight: var(--font-weight-bold);
      letter-spacing: var(--letter-spacing-tight); text-transform: uppercase;
      background: var(--color-surface-inverse); color: var(--color-text-on-dark);
      border: var(--border-width-default) solid transparent;
      height: var(--size-sm); line-height: 1; cursor: default;
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-decelerate);
    }
    .btn-chip-dismissible:hover { border-radius: var(--radius-md); transition: none; }
    .btn-chip-dismissible .chip-dismiss-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; flex-shrink: 0;
      background: transparent; border: none; padding: 0;
      color: var(--color-text-on-dark); cursor: pointer;
      opacity: 0.65; font-size: 12px; line-height: 0;
      margin-right: -4px; /* puxa opticamente para borda: texto fica centrado */
      transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
    }
    .btn-chip-dismissible .chip-dismiss-btn i.fi { font-size: 12px; display: inline-flex; align-items: center; line-height: 0; }
    .btn-chip-dismissible .chip-dismiss-btn:hover { opacity: 1; }
    .btn-chip-dismissible .chip-dismiss-btn:focus-visible {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact); opacity: 1;
    }
    .btn-chip-dismissible.is-disabled {
      background: var(--color-state-disabled); color: var(--color-text-disabled);
      border-color: var(--color-border); cursor: not-allowed;
    }
    .btn-chip-dismissible.is-disabled:hover { border-radius: var(--radius-full); transition: none; }
    .btn-chip-dismissible.is-disabled .chip-dismiss-btn { display: none; }

    /* Chip Dismissible — dark context (accent bg, primary text) */
    .btn-chip-dismissible-dark {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 0 10px;
      border-radius: var(--radius-full);
      font-family: var(--font-family-base); font-size: var(--btn-font-md); font-weight: var(--font-weight-bold);
      letter-spacing: var(--letter-spacing-tight); text-transform: uppercase;
      background: var(--color-warm-soft); color: var(--color-surface-inverse);
      border: var(--border-width-default) solid transparent;
      height: var(--size-sm); line-height: 1; cursor: default;
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-decelerate);
    }
    .btn-chip-dismissible-dark:hover { border-radius: var(--radius-md); transition: none; }
    .btn-chip-dismissible-dark .chip-dismiss-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; flex-shrink: 0;
      background: transparent; border: none; padding: 0;
      color: var(--color-surface-inverse); cursor: pointer;
      opacity: 0.75; font-size: 12px; line-height: 0; /* 0.75: primary-500 em accent-200 ≈ 3.18:1 AA ✓ */
      margin-right: -4px;
      transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
    }
    .btn-chip-dismissible-dark .chip-dismiss-btn i.fi { font-size: 12px; display: inline-flex; align-items: center; line-height: 0; }
    .btn-chip-dismissible-dark .chip-dismiss-btn:hover { opacity: 1; }
    .btn-chip-dismissible-dark .chip-dismiss-btn:focus-visible {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact); opacity: 1;
    }
    /* Disabled dark: primary-400 em accent-200 ≈ 4.2:1 AA ✓ (era primary-200 ~ 1.6:1 fail). */
    .btn-chip-dismissible-dark.is-disabled {
      background: var(--color-warm-soft); color: var(--palette-primary-400);
      cursor: not-allowed;
    }
    .btn-chip-dismissible-dark.is-disabled:hover { border-radius: var(--radius-full); transition: none; }
    .btn-chip-dismissible-dark.is-disabled .chip-dismiss-btn { display: none; }

    /* Interactive IconButton — bare icon, color shift primary-500→primary-400 on hover, primary-600 on pressed */
    .btn-interactive-iconbutton {
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; border: none;
      color: var(--color-text-heading); cursor: pointer;
      padding: var(--space-3); border-radius: var(--radius-md);
      transition: color var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-iconbutton i.fi { font-size: var(--icon-md); display: inline-flex; align-items: center; line-height: 0; }
    .btn-interactive-iconbutton:hover {
      color: var(--palette-primary-400);
      transition: color var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-iconbutton:active { color: var(--palette-primary-600); transition: none; }
    .btn-interactive-iconbutton:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset-compact); }
    .btn-interactive-iconbutton:disabled {
      color: var(--color-text-disabled); cursor: not-allowed; background: transparent;
    }

    /* Interactive ButtonIcon — filled, radius morph only (no gradient — that's primary exclusive) */
    /* Interactive IconButton small — icon 16px */
    .btn-interactive-iconbutton-sm {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--color-text-heading);
      cursor: pointer;
      padding: var(--space-2);
      border-radius: var(--radius-md);
      transition: color var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-iconbutton-sm i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }
    .btn-interactive-iconbutton-sm:hover {
      color: var(--palette-primary-400);
      transition: color var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-iconbutton-sm:active { color: var(--palette-primary-600); transition: none; }
    .btn-interactive-iconbutton-sm:focus-visible {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact);
    }
    .btn-interactive-iconbutton-sm:disabled {
      color: var(--color-text-disabled);
      cursor: not-allowed;
      background: transparent;
    }

    /* Interactive IconButton — dark context (accent-300 → accent-50 hover → accent-300 pressed) */
    .btn-interactive-iconbutton-dark {
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; border: none;
      color: var(--color-warm-soft);
      cursor: pointer; padding: var(--space-2); border-radius: var(--radius-md);
      transition: color var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-iconbutton-dark i.fi {
      font-size: var(--icon-md);
      display: inline-flex; align-items: center; line-height: 0;
    }
    .btn-interactive-iconbutton-dark:hover {
      color: var(--color-text-on-dark);
      transition: color var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-iconbutton-dark:active { color: var(--color-warm-soft); transition: none; }
    .btn-interactive-iconbutton-dark:focus-visible {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact);
    }
    .btn-interactive-iconbutton-dark:disabled {
      color: var(--color-text-disabled); cursor: not-allowed; background: transparent;
    }

    /* Interactive IconButton dark — sm */
    .btn-interactive-iconbutton-dark-sm {
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; border: none;
      color: var(--color-warm-soft);
      cursor: pointer; padding: var(--space-2); border-radius: var(--radius-md);
      transition: color var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-iconbutton-dark-sm i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }
    .btn-interactive-iconbutton-dark-sm:hover {
      color: var(--color-text-on-dark);
      transition: color var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-iconbutton-dark-sm:active { color: var(--color-warm-soft); transition: none; }
    .btn-interactive-iconbutton-dark-sm:focus-visible {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset-compact);
    }
    .btn-interactive-iconbutton-dark-sm:disabled {
      color: var(--color-text-disabled); cursor: not-allowed; background: transparent;
    }

    /* Interactive ButtonIcon medium — 36×36px */
    .btn-interactive-buttonicon-md {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--btn-buttonicon-md);
      height: var(--btn-buttonicon-md);
      flex-shrink: 0;
      border: none;
      cursor: pointer;
      background: var(--color-primary);
      color: var(--color-text-on-primary);
      border-radius: var(--radius-md);
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-buttonicon-md i.fi {
      font-size: var(--icon-sm);
      display: inline-flex; align-items: center; line-height: 0;
    }
    .btn-interactive-buttonicon-md:hover {
      border-radius: var(--radius-sm);
      transition: border-radius var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-buttonicon-md:active {
      background: var(--color-primary-hover);
      border-radius: var(--radius-sm);
      transition: none;
    }
    .btn-interactive-buttonicon-md:focus-visible {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: var(--focus-ring-offset);
    }
    .btn-interactive-buttonicon-md:disabled {
      background: var(--color-state-disabled);
      color: var(--color-text-disabled);
      cursor: not-allowed;
      border-radius: var(--radius-md);
    }

        .btn-interactive-buttonicon {
      display: inline-flex; align-items: center; justify-content: center;
      width: var(--btn-buttonicon-lg); height: var(--btn-buttonicon-lg); flex-shrink: 0;
      border: none; cursor: pointer;
      background: var(--color-primary);
      color: var(--color-text-on-primary);
      border-radius: var(--btn-radius);
      transition: border-radius var(--motion-duration-slow) var(--motion-easing-expressive);
    }
    .btn-interactive-buttonicon i.fi { font-size: var(--icon-sm); display: inline-flex; align-items: center; line-height: 0; }
    .btn-interactive-buttonicon:hover {
      border-radius: var(--radius-md);
      transition: border-radius var(--motion-duration-expressive) var(--motion-easing-expressive);
    }
    .btn-interactive-buttonicon:active {
      background: var(--color-primary-hover); border-radius: var(--radius-md); transition: none;
    }
    .btn-interactive-buttonicon:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }
    .btn-interactive-buttonicon:disabled {
      background: var(--color-state-disabled);
      color: var(--color-text-disabled); cursor: not-allowed; border-radius: var(--btn-radius);
    }

    @media (prefers-reduced-motion: reduce) {
      .btn-interactive-outline, .btn-interactive-outline:hover,
      .btn-interactive-ghost, .btn-interactive-ghost:hover,
      .btn-interactive-outline-dark, .btn-interactive-outline-dark:hover,
      .btn-interactive-ghost-dark, .btn-interactive-ghost-dark:hover,
      .btn-interactive-chip, .btn-interactive-chip:hover,
      .btn-interactive-chip-lg, .btn-interactive-chip-lg:hover,
      .btn-interactive-iconbutton, .btn-interactive-iconbutton:hover,
      .btn-interactive-iconbutton-dark, .btn-interactive-iconbutton-dark:hover,
      .btn-interactive-iconbutton-dark-sm, .btn-interactive-iconbutton-dark-sm:hover,
      .btn-interactive-buttonicon, .btn-interactive-buttonicon:hover,
      .btn-interactive-buttonicon-md, .btn-interactive-buttonicon-md:hover,
      .btn-interactive-chip-dark, .btn-interactive-chip-dark:hover { transition: none; }
    }

    /* Chip large */
    .btn-chip-lg {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: var(--size-xl);
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-full);
      font-family: var(--font-family-base);
      font-size: var(--btn-font-md);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-tight);
      cursor: pointer;
      border: var(--border-width-default) solid transparent;
      line-height: normal;
    }
    .btn-chip-lg.btn-chip-selected { background: var(--color-surface-inverse); color: var(--color-text-on-dark); border-color: transparent; }
    .btn-chip-lg.btn-chip-default  { background: transparent; color: var(--color-text-accent); border-color: var(--color-border-strong); }
    .btn-chip-lg:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset-compact); }

    /* ── Snapshot state classes — used in V&E grid instead of inline styles ── */
    /* Primary hover: gradient flash + radius morph */
    .btn-demo-primary.is-hover {
      background: linear-gradient(to right, var(--color-primary) 0%, var(--palette-brand-300) 70%, var(--color-primary) 85%);
      border-radius: var(--radius-md);
    }
    /* Primary pressed */
    .btn-demo-primary.is-pressed { background: var(--color-primary-hover); }
    /* Outline hover: radius morph only */
    .btn-demo-outline.is-hover { border-radius: var(--radius-md); }
    /* Ghost hover: color shift to primary-400 */
    .btn-demo-ghost.is-hover { color: var(--palette-primary-400); }
    /* Ghost pressed: opacity dip */
    .btn-demo-ghost.is-pressed { opacity: var(--opacity-pressed, 0.9); }
    /* Focus ring — shared across all btn-demo variants */
    .btn-demo.is-focus { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }

    /* ── Dark variant snapshot classes ── */
    .btn-demo-outline-dark.is-hover  { border-radius: var(--radius-md); color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); }
    .btn-demo-outline-dark.is-pressed { border-radius: var(--radius-md); }
    .btn-demo-outline-dark.is-focus  { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }
    .btn-demo-ghost-dark.is-hover    { color: var(--color-text-on-dark); }
    .btn-demo-ghost-dark.is-focus    { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: var(--focus-ring-offset); }