@layer components {
  .btn {
    --btn-bg: var(--color-canvas);
    --btn-color: var(--color-ink);
    --btn-border: var(--color-ink-border);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5ch;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    padding: 0.6em 1.2em;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: var(--text-small);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: all var(--duration-normal) ease;
    position: relative;
    white-space: nowrap;

    @media (any-hover: hover) {
      &:hover { filter: brightness(0.95); }
      &:active { transform: scale(0.98); }
    }
  }

  .btn--primary {
    --btn-bg: var(--color-primary);
    --btn-color: white;
    --btn-border: var(--color-primary);

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: var(--color-primary-hover);
        --btn-border: var(--color-primary-hover);
        filter: none;
      }
    }
  }

  .btn--danger {
    --btn-bg: var(--color-canvas);
    --btn-color: var(--color-danger);
    --btn-border: var(--color-danger);

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: var(--color-danger);
        --btn-color: white;
        filter: none;
      }
    }
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-color: var(--color-primary);

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: var(--color-primary-light);
        filter: none;
      }
    }
  }

  .btn--outline-white {
    --btn-bg: transparent;
    --btn-color: white;
    --btn-border: var(--on-dark-border);

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: var(--on-dark-bg-subtle);
        filter: none;
      }
    }
  }

  .btn--on-dark {
    --btn-bg: var(--on-dark-bg);
    --btn-color: white;
    --btn-border: transparent;

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: var(--on-dark-border);
        filter: none;
      }
    }
  }

  .btn--small {
    padding: 0.45em 0.75em;
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
    min-height: 2.25rem;
  }

  .btn--large {
    padding: 0.85em 1.8em;
    font-size: var(--text-normal);
    border-radius: var(--radius-lg);
  }

  .btn--whatsapp {
    --btn-bg: #25D366;
    --btn-border: #25D366;
    --btn-color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.85em 1.8em;
    border-radius: var(--radius-pill);
    width: 100%;
    justify-content: center;
    margin-block: var(--block-space);
  }

  .btn--pill { border-radius: var(--radius-pill); }

  .btn--full {
    width: 100%;
    justify-content: center;
    padding-block: 0.85em;
  }

  .btn__badge {
    background: white;
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 800;
    padding: 0.1em 0.5em;
    border-radius: var(--radius-pill);
    margin-left: 0.3ch;
  }

  .btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Add button for sticker cards */
  .btn-add {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-normal);
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) ease;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    line-height: 1;

    @media (any-hover: hover) {
      &:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 10px oklch(35% 0.12 150 / 0.3);
      }
    }

    &:active {
      transform: scale(0.9);
      transition-duration: 50ms;
    }
  }

  /* Brilhantes — silver/platinum */
  .btn-add--accent {
    background: linear-gradient(145deg, #808090, #B0B0C0, #707080);

    @media (any-hover: hover) {
      &:hover {
        box-shadow: 0 2px 10px oklch(60% 0 0 / 0.3);
      }
    }
  }

  /* Álbum Completo — gold */
  .btn-add--album {
    background: var(--color-accent);

    @media (any-hover: hover) {
      &:hover {
        box-shadow: 0 2px 10px oklch(60% 0.12 85 / 0.3);
      }
    }
  }

  /* Coleção Coca-Cola — red */
  .btn-add--coca-cola {
    background: #E60028;

    @media (any-hover: hover) {
      &:hover {
        background: #C4001F;
        box-shadow: 0 2px 10px oklch(35% 0.2 20 / 0.3);
      }
    }
  }
}